Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Practice Fetch API

Well done!

You have completed Practice Fetch API!

Sign up for Treehouse Back to Library
Preview
Video Player
00:00
00:00
00:00
  1. 2x 2x
  2. 1.75x 1.75x
  3. 1.5x 1.5x
  4. 1.25x 1.25x
  5. 1.1x 1.1x
  6. 1x 1x
  7. 0.75x 0.75x
  8. 0.5x 0.5x
Use Up/Down Arrow keys to increase or decrease volume.

One Solution

3:20 with Rohald van Merode

This video covers one solution to the challenge

Hey, how did it go? 0:00
Were you able to retrieve all the information from the API? 0:01
Don't worry if you didn't. 0:05
Keep watching to see my solution and then go ahead and give it another try. 0:06
I started by creating a stub for the getCountries function. 0:11
As we must wait for the API response, 0:15
I made the function asynchronous by adding the async keyword. 0:17
To catch any issues we may encounter while fetching the data, I'll wrap my 0:22
code in a try catch block, where any errors will be logged to the console. 0:26
Let's look at the documentation to see which URL we want to fetch the data from. 0:31
If we scroll down a bit the information we need is here. 0:35
We want to get the information for all countries, and 0:40
by specifying the fields, we can select which data we need. 0:43
In the fields section, 0:47
you'll find a link to a markdown file to see what fields are available. 0:48
As you can see, the API provides a wide range of information. 0:52
To retrieve only the relevant data, we'll include specific flags for 0:56
name, flags, population, capital, and region. 1:01
With this identified endpoint and parameters, 1:05
we can now complete the getCountries function. 1:08
Let's begin by calling the fetch function and passing in the URL. 1:11
I've included the fields parameter to retrieve only the necessary data. 1:15
I use a wait with this fetch call to ensure that the code waits for 1:19
the promise to be resolved before proceeding. 1:23
If the request encounters an issue, an error will be thrown and 1:26
subsequently caught by the catch block. 1:30
Otherwise, I convert the response to json format, which also requires using a wait. 1:33
Let's log the data to the console and call our function to test the code. 1:40
If we save our progress and refresh the page, 1:44
we'll see an array of countries being printed in the console. 1:47
Excellent! 1:51
We have successfully fetched the data. 1:52
Upon examining the individual country objects, 1:54
we can confirm that all the requested fields are being returned as expected. 1:57
Everything is working perfectly, and it's time to display the data on the page. 2:02
On line 8 in the getCountries function, I've changed the console log to call 2:07
the displayCountries function and pass it the array of countries. 2:12
In the displayCountries function, 2:16
I'm iterating over the array using a forEach method. 2:19
For each country, I'm generating the HTML using a template literal and 2:22
storing it in the countryHtml variable. 2:27
Finally, I'm selecting the country's container element and 2:30
inserting the generated countryHtml using the insertAdjacentHTML method. 2:34
At the bottom of the file, the getCountries function is being called. 2:39
Let's move over to the browser to see our code in action. 2:43
And there we have it. 2:46
All flags and other information retrieved from the API are displayed on the page. 2:48
Nice work. 2:53
Congratulations on completing this practice session. 2:54
If you've encountered challenges along the way, remember that practice makes perfect. 2:57
Don't hesitate to start over and give it another try. 3:02
You'll find a collection of additional APIs to explore and 3:06
practice within the teacher's notes. 3:09
Take on those challenges with confidence and have fun expanding your coding skills. 3:11
Thanks for your participation and happy coding. 3:16