Exercise Solutions: FetchΒΆ

  1. Fetch the URL

    1
2
3
4
5
    window.addEventListener("load", function() {
   fetch("https://handlers.education.launchcode.org/static/planets.json").then(function(response){
      // TODO: do something after fetching and receiving a response
   });
});

    Back to the exercises

  1. Use the .json() method to print response data:

    1
2
3
4
5
    fetch("https://handlers.education.launchcode.org/static/planets.json").then(function(response){
   response.json().then(function(json) {
      console.log(json);
   });
});

    Your console.log statement should return the same array of 6 JSON objects containing planetary data found here.

    Back to the exercises

  1. Capture the JSON data:

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
    window.addEventListener("load", function() {
   let json = [];
   fetch("https://handlers.education.launchcode.org/static/planets.json").then(function(response){
      response.json().then(function(json) {
         console.log(json);
      });
   });
   const destination = document.getElementById("destination");
   destination.innerHTML = `<h3>Planet ${json[0].name}</h3>`;
});

    We can tell that our fetch works because the JSON array is printed to the console. However, you should also see an error in the console related to the template literal using json[0].name. This error occurs because of the asynchronous nature of JavaScript. Although we now have json defined outside of the fetch request, at the point in time that we seek it for the template literal, we haven't yet received the json data. One clue that asynchronism is at play: the error appears before the printed JSON.

    Back to the exercises

  1. Dynamically change planet info displayed

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
    fetch("https://handlers.education.launchcode.org/static/planets.json").then(function(response) {
   response.json().then(function(json) {
      const destination = document.getElementById("destination");
      let index = 0;
      destination.addEventListener("click", function(){
         destination.innerHTML = `
            <div>
               <h3>Planet ${json[index].name}</h3>
               <img src=${json[index].image} height=250></img>
            </div>
         `;
         index = (index + 1) % json.length;
      });
   });
});

    Back to the exercises