Playing Fetch with Astronauts

JavaScript provides a robust way of accessing data across a network and dynamically writing HTML to a page with the results. Let’s say, for example, we’d like to display the current number of people in space and their names. With the help of the Number of People in Space API this can be done quite easily with Fetch & a few simple helper functions.

To begin, we can use fetch to get the data we’d like to work with.

const fetchURL = "http://api.open-notify.org/astros.json"
fetch (fetchURL)
        .then(resp => resp.json())
        .then(json => {
                console.log(json)
        })

Logging the results to the console we see both the number of people and their names.

{people: Array(6), number: 6, message: "success"}
     message: "success" number: 6 
     people: Array(6)
        0: {name: "Christina Koch", craft: "ISS"} 
        1: {name: "Alexander Skvortsov", craft: "ISS"} 
        2: {name: "Luca Parmitano", craft: "ISS"} 
        3: {name: "Andrew Morgan", craft: "ISS"} 
        4: {name: "Oleg Skripochka", craft: "ISS"}
         5: {name: "Jessica Meir", craft: "ISS"} 
        length: 6 
        __proto__: Array(0) 
     __proto__: Object

Next we need a place for that information to go. If for instance we’d like this information to go inside a div element…

function astronautContainer() {
    const containerDiv = document.createElement('div');
    containerDiv.className = 'astronaut';
    return containerDiv;
}

By creating a function to draw the element for us we can control its attributes, in this case assigning the class name "astronaut". In other situations one could pass an argument to the function, then use that argument's information to assign other attributes to the element ( e.g. class, id, etc).

We can see that the names of our people in space are organized in an array. Assuming that we’d pull this information while iterating over the array we can then pass that info as an argument to our next function.

function astronautHTML(astronaut) {
    return `
        ${astronaut.name} aboard the ${astronaut.craft}
    `
}

Knowing what information we can receive from the API & armed with our helper functions we can return to Fetch & draw elements to the DOM. This time, adding a "body" variable assigned to the DOM's body element. Having the body variable defined allows us to write to its inner html, as well as append children elements.

body = document.querySelector(‘body’)
const fetchURL = "http://api.open-notify.org/astros.json"
fetch (fetchURL)
        .then(resp => resp.json())
        .then(json => {
                body.innerHTML = `There are ${json.number} people in space<br><p>`
                json.people.forEach(person => {
                        let newDiv = astronautContainer()
                        newDiv.innerHTML = astronautHTML(person)
                        body.appendChild(newDiv)
                })
        })

Which gives us…

"There are 6 people in space"
<br></p>
<div class="astronaut">
        Christina Koch aboard the ISS
    </div>
<div class="astronaut">
        Alexander Skvortsov aboard the ISS
    </div>
<div class="astronaut">
        Luca Parmitano aboard the ISS
    </div>
<div class="astronaut">
        Andrew Morgan aboard the ISS
    </div>
<div class="astronaut">
        Oleg Skripochka aboard the ISS
    </div>
<div class="astronaut">
        Jessica Meir aboard the ISS
    </div>

Having the ability to dynamically assign an element's id or class can make life easier when searching for elements or styling with css.

Blog

Playing Fetch with Astronauts

Adam La Rosa

Join Our Newsletter. No Spam, Only the good stuff.

Related