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 Working with the Fetch API!
You have completed Working with the Fetch API!
Preview
In this video, we'll display the image on the page, and fetch the list of breeds to display the <select> menu options.
Code Snippets
fetch('https://dog.ceo/api/breeds/list')
Resources
Related videos
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
In the previous video we
made a fetch request.
0:00
It's returning a response that
we're then converting to json, and
0:03
we're getting the actual json data
with the URL to display our image.
0:07
So, now we'll need to display
the image on the page and
0:11
later populate the select menu
with a list of breed options.
0:13
So first up, in the second then method,
0:17
I'll replace the console.log
with a call to a function
0:20
named generateImage()
passing it data.message.
0:26
Next we'll need to create this function.
0:31
So right below the helper functions
comment create the function generateImage.
0:33
The function will take
the parameter (data),
0:41
and inside the function,
I'll create a variable named html and
0:46
assign it a template literal I'll use to
0:53
create the mark up for an <img> and a <p>.
0:58
Next, using interpolation,
I'll set the src attribute to
1:03
the value passed in for data, so
this will be the URL return from the API.
1:07
I'll add an empty alt attribute for
now, and inside the paragraph tags,
1:13
I'll display the text,
Click to view images of, and
1:20
I'll use interpolation to insert the value
of the select menu into the text.
1:24
So I'll type ${select.value}s.
1:31
So, for instance, if the value of
the select menu is Affenpinscher,
1:39
this will read click to view
images of Affenpinschers.
1:45
Finally I'll set the innerHTML
of the selected card element,
1:49
so this is the div with the class card,
to the HTML variable.
1:55
Now we could have written this template
in code inside the .then method, but
2:00
writing as a separate function
keeps the code cleaner and modular.
2:05
All right, so I'll give my code a save,
refresh the browser, and
2:09
good there's our random dog image.
2:15
Now the text doesn't
display the breed name yet,
2:17
that's because we haven't added
options to the select menu.
2:20
Next, when the page loads,
2:26
I'd like to use the breeds/list endpoint
to return a list of all the master breeds.
2:28
You can see what the data looks like when
you click the JSON link here in the docs.
2:33
As you can see, it's an array
containing the breeds as strings.
2:37
Now you could also use the all
dogs endpoint if you'd like,
2:41
which includes sub-breeds, but
the data in the master breeds
2:45
endpoint is a little easier to work with,
so I'm using it for this workshop.
2:48
I wanna use this data to populate
the select menu at the top of the page.
2:53
As you can see here in the final example,
2:58
each element in the array will create
a selectable option element in the menu.
3:00
So back in app.js I'll
create a new fetch request
3:06
just like earlier using the fetch method.
3:11
I'll pass the method,
the breeds list endpoint, and
3:16
chain a .then method that converts
the data and the response to json.
3:22
Once we have our json data,
3:33
we can render the list of options
inside the select element.
3:34
So I'll chain a second .then method and
console.log(data) for now.
3:38
Over in the console, notice how this time,
3:50
the message properties value is an array
containing all the breeds as strings.
3:53
So first, we'll need to map or
iterate over the items in the array,
3:59
place them inside option elements,
and insert them into the select menu.
4:04
Again, I'll write the JavaScript for
this in a function.
4:09
So back in app.js,
just above the generateImage function,
4:13
I'll create the function, generateOptions.
4:18
The function will take
the parameter (data).
4:26
Inside the function I'll create
a variable named options, and
4:30
here I'll use the map method,
to iterate over the array,
4:36
and return an option element for
each item in the array.
4:41
The returned value from this function
will be stored in the options variable.
4:46
The map callback will take
the parameter item and,
4:51
once again, I'll use a template
literal to return the option elements.
4:56
So inside the back tics,
I'll write opening and
5:02
closing <option></option> tags.
5:05
Next, I'll use interpolation
to insert each returned
5:11
breed as the value of the option and
as the text.
5:16
Then I'll insert the option
elements into the page while
5:25
setting the innerHTML of
the select element to options.
5:29
And finally,
up in the first fetch request,
5:38
I'll call generateOptions
in our .then method,
5:42
Passing it (data.message).
5:49
All right, let's have a look.
5:54
Over in the browser,
I'll refresh, and good.
5:56
Now we can click the select menu
to see the breed options, and
5:59
below the image we see the text Click
to view images of affenpinschers,
6:03
because that's the first option
displayed in the select menu.
6:07
Now one last thing, the map function
returns an array with all the option
6:14
elements separated with a comma, and
6:18
those commas also get inserted into the
markup, as you can see here in DevTools.
6:21
So to remove the commas,
I'll call join() on map() here
6:28
in the generateOptions function,
passing it a set of quotes.
6:33
And now the commas are gone.
6:44
In a later video, we are going to
program the select menu to display a dog
6:47
image based on the selected breed.
6:52
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