Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Practice Fetch API!
You have completed Practice Fetch API!
Preview
This video covers one solution to the challenge
Other Fun APIs
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up