Task 3: Fetching Planetary Data

Finally, we need some JSON to fill in the crew on the mission destination. Our planetary data can be found in JSON format . Review the list and decide which planet you want to send our intrepid crew to and make note of the index number.

In scriptHelper.js, you have three functions for this task: myFetch(), pickPlanet(), and addDestinationInfo().

First, review the comments in addDestinationInfo(). This is the format of the innerHTML for the missionTarget div, which you can locate using the document parameter of addDestinationInfo(). addDestinationInfo() does not need to return anything.

pickPlanet() takes in one argument: a list of planets. Using Math.random(), return one planet from the list with a randomly-selected index.

myFetch() has some of the code necessary for fetching planetary JSON, however, it is not complete. You need to add the URL to the fetch method call and return response.json() from the inner function.

Now it is time to make use of these helper functions in script.js. We provided some of the code necessary:

   let listedPlanets;
   // Set listedPlanetsResponse equal to the value returned by calling myFetch()
   let listedPlanetsResponse;
   listedPlanetsResponse.then(function (result) {
       listedPlanets = result;
       // console.log(listedPlanets);
   }).then(function () {
       // console.log(listedPlanets);
       // Below this comment call the appropriate helper functions to pick a planet fom the list of planets and add that information to your destination.
   })

First, do as the comments in the code tell you and set listedPlanetsResponse equal to the value returned when calling myFetch(). This value is going to be a promise. If we head to our browser and open up our developer tools, we can now see a list of the planets. Then using pickPlanet() and addDestinationInfo(), select a planet at random from listedPlanets and pass that information to addDestinationInfo(). Reload your page and check out your site to see the mission target information.