Wandering through JavaScript

If someone told me one year ago I’d be sitting here typing up a blog post about JavaScript just as I finished my first Software Engineering project, I’d say “I didn’t know COVID made people delusional!”

All jokes aside, I’m grateful a global pandemic gave me the push to join Flatiron Schools Software Engineering program sooner rather than later. I’ve learned (and Googled) quite a lot over the last several weeks, and would like to share a few things I’ve learned throughout my first project build.

My project is a Single-Page Application called Wanderout. Over the last few years, I’ve developed a deep fondness for hiking, and so I wanted my project to reflect that. Wanderout leverages the National Park Service API, which consists of over 500 national parks, visitor centers, photos, campgrounds, events, cultural features, important people and places, and more. Wanderout is an application that allows a user to select a state and generate a list of all the National Parks and their information accordingly.

Demo of Wanderout

What is the Fetch API?

Back in the day XMLHttpRequest was used to make API requests. It didn’t include promises, and it didn’t make for clean JavaScript code.

Now, JavaScript has its own built-in way to make API requests. This is the Fetch API.

fetch() allows you to make network requests similar to XMLHttpRequest (XHR). The main difference is that the Fetch API uses Promises, which enables a simpler and cleaner API, avoiding callback hell and having to remember the complex API of XMLHttpRequest.

One thing I struggled with was setting the JSON data I received from fetch() to a variable that I could use for multiple functions. Here is an example of where this was useful:

let parks = null
getParks()
function getParks() {
fetch(url)
.then(res => {
return res.json()
})
.then(data => {
parks = data
console.log(parks)
})
}
function renderParks(selectedState) {
console.log(selectedState)
let filteredParks = parks.data.filter(el => {
return el.states.includes(selectedState)
}
)
console.log(filteredParks)

This allowed me to avoid having multiple fetch() calls in my code.

Array.prototype.filter() & Array.prototype.includes()

After setting up my fetch, my next biggest challenge was to figure out how to get my parks data to only render parks that included the selected state from the dropdown list.

The filter() method creates a new array with all elements that pass the test implemented by the provided function.

The includes() method determines whether an array includes a certain value among its entries, returning true or false as appropriate.

I was able to combine both of these array methods to create a filtered dataset that included the state value selected.

function renderParks(selectedState) {
console.log(selectedState)
let filteredParks = parks.data.filter(el => {
return el.states.includes(selectedState)
}
)
console.log(filteredParks)
for (let i = 0; i < filteredParks.length; i++) {
const ul = document.createElement(‘ul’)
const img = document.createElement(‘img’)
const descrip = document.createElement(‘p’)
const directions = document.createElement(‘a’)
const liker = document.createElement(‘button’)
liker.setAttribute(“id”, “liker-btn”)
liker.textContent = EMPTY_HEART
directions.innerText = ‘Get Directions’
directions.href = filteredParks[i].directionsUrl
directions.target = ‘_blank’
img.src = filteredParks[i].images[0].url
ul.innerText = filteredParks[i].fullName
descrip.innerText = filteredParks[i].description
parkDiv.append(img, ul, descrip, directions, liker)
}

Overall, I am very content with Wanderout. There were definitely lessons learned throughout this project, but I would say without a doubt that planning and wireframing was the best thing I could have done to be successful. Though there were pieces I wasn’t able to get working, I’m pretty proud of the finished product.

Thanks for reading and if you’d like you can see the rest of the code for my project here: https://github.com/megcho/wanderout