The American Journey - Mapping Through The National Parks Service API
For my Flatiron School React Project I created an app that utilizes React frontend with Rails API backend, along with an external API provided by the National Parks Service. The American Journey makes visiting National Parks simple and fun. Find useful information on the United States National Parks, as well as track which parks you have visited. If you come across a park that you have not visited but want to save for easier finding later on, add it to the favorited parks list. Take on the challenge to visit all of the United States National Parks!
The biggest issue I ran into while using the external API provided by the National Parks Service occurred while mapping through the following data.
Mapping through addresses to pull all of the values from the key - value pairs, and displaying them as one string on my frontend was the challenge I was faced with. This was the most difficult part of working with the National Parks Service API.
In order to work through this mapping issue, I had to do some research on the topic. I came across a very useful method called “.reduce()”. See lines 29–31 for implementation of “.reduce()” in my code.
The “.reduce()” method executes a reducer function (that you provide) on each element of an array, resulting in a single output value. The reducer function takes four arguments: Accumulator, Current Value, Current Index, and Source Array. The “.reduce()” method returns a single value which is the function's accumulated result. Additionally, the “.reduce()” method does not execute the function for empty array elements and does not change the original array.
After utilizing the “.reduce()” method in my code, I was able to successfully map through addresses and pull all the values I needed to display on my frontend. I’m still having a minor issue getting the information to display in the correct order needed, so more research will be done on that. Keep an eye out for a new blog that I post on the solution to that issue. As it remains now, see the above image for the final result of mapping through addresses using “.reduce()”.
Thanks for reading, feel free to clone my app and try it out!
