Preview
Video Player
00:00
00:00
Displaying the Content
6:56In this video, we'll display the image on the page, and fetch the list of breeds to display the <select> menu options.
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