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 JavaScript Data Fetching!
You have completed JavaScript Data Fetching!
Preview
Let’s fetch and display random dog images using the Dog API. We’ll start with the first available breed on page load. You’ll learn how to make image requests dynamic, update the DOM with fetched data, and set accessible image attributes along the way.
Resources
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
Okay.
0:00
We're ready to keep moving on
with the fun stuff.
0:01
What we need
is some awesome dog pictures in this app.
0:04
So what's our plan?
0:06
Well, since our select menu
automatically selects
0:08
the first value of Affenpinscher
once our data is fetched and processed,
0:11
I think getting an image of one of those
first makes sense.
0:15
Let's check out the documentation again.
0:18
There's a link in the teacher's
notes below if you need it again.
0:20
Let's go to by breed,
0:24
and this top one says
it gets every image of a selected breed.
0:27
We definitely don't want that.
0:30
Let's scroll down a bit. Here we go.
0:32
Random image from a breed collection.
0:35
Perfect.
0:38
Let's copy
this URL and head back to the code.
0:39
I'm just going to paste
this into a comment for now.
0:43
See here where it says hound?
0:49
This is where we need to specify
what breed we want to fetch an image of,
0:51
So we could go in and hard code
a value of Affenpinscher
0:55
since we know ahead of time
that this will be the initial value,
0:59
but we'd need a separate fetch call
for future image fetches,
1:02
one that uses a value dynamically there.
1:06
And what if a whole new breed
that alphabetically comes
1:09
before Affenpinscher gets discovered
and is added to this list?
1:12
Things wouldn't break,
but would be strange on initial page load,
1:16
seeing an Affenpinscher image yet
having that new breed selected down there.
1:20
And just in case you're wondering,
it is possible.
1:24
A few years ago when I used this, there
was only 90 something breeds in this list.
1:27
So let's create
1:31
another function to be responsible
for fetching and displaying an image.
1:32
Like before,
we want this to be an async function,
1:37
and I'll name it fetch and display image.
1:41
Cool.
1:50
Let's add in our handy dandy try and catch
1:51
blocks again.
1:53
And I'm just gonna copy this line
2:01
up here from the catch block above.
2:03
Awesome.
2:07
We're ready to fetch.
2:08
Wanna give this one a go?
2:09
Try and fetch an image from this endpoint
here.
2:11
Check that the response was okay
and parse it to JSON.
2:14
After that,
just log it to the console and wait there.
2:18
Ready?
2:21
Go ahead and pause me.
2:22
How'd you do?
2:25
If you got stuck, don't worry.
2:26
Here's how we can do it.
2:27
I'm actually going to cheat here and copy
all this code here and paste it right in.
2:29
Doesn't seem very dry.
2:34
You know, don't repeat yourself.
2:37
We'll get to that later. Don't worry.
2:39
Then we'll change the endpoint here.
2:42
And lastly, I'll console
2:50
log our data dot message.
2:52
Okay.
3:01
Now we need to call this function,
and I'm thinking ahead a bit.
3:01
This will make more sense shortly,
but I'm actually going to call it
3:05
at the end of this try block up here.
3:08
Let's save and try it out.
3:15
Perfect.
3:19
We're getting a URL returned
for the path to our requested photo.
3:20
We can see it if we right
click and open in a new tab.
3:25
Aww, so cute.
3:30
Okay. Let's use this.
3:32
So up top here,
I have a variable all set up,
3:34
which is grabbing our image element
in the DOM.
3:37
So I'll remove this console log and assign
3:44
this image's src
attribute equal to the returned URL.
3:47
Let's save and see if it works.
3:55
Nice.
3:59
We got a hound dog.
4:00
If we refresh, we see it's grabbing
a new random hound image each time.
4:02
We're winning.
4:06
Let's figure out how to get this
to be a bit more dynamic.
4:07
So we want to fetch an image
for the first value
4:11
returned in our breeds array,
no matter what it is.
4:14
And I think a great place to do
that is right after we set these options.
4:17
So let's actually pass data dot message
4:22
at position zero
4:27
as an argument to our fetch and display
image function.
4:28
Let's set a parameter to accept this.
4:32
We can just call it breed.
4:35
Now let's change our endpoint here
4:37
to be a template literal and dynamically
insert our passed in breed.
4:39
Alright.
4:53
Let's save and check it out.
4:54
Awesome.
4:58
We're seeing Affenpinschers.
4:59
Goofy little guys, huh?
5:01
They kinda look like Ewoks.
5:02
So with this breed being passed
5:06
in, we can also set our image's
alt attribute.
5:07
Let's go down here and say dog image dot
5:10
alt equals, a template literal
5:14
a, our breed, dog.
5:19
Cool.
5:27
Let's save and head back to the preview.
5:27
Let's refresh, and let's open
the elements tab.
5:30
Let's get down to our image.
5:34
There it is. Awesome.
5:36
I guess we probably should have put
5:39
a parenthesis n after our a word here,
but, oh well.
5:40
So our app is looking good upon page load,
5:44
but there's still a little work to be done
here.
5:46
Let's wrap it up in the next video.
5:49
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