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 wire up user interactions to fetch data dynamically based on selections and button clicks, making the app fully interactive. Along the way, we’ll clean up repeated fetch logic with a reusable helper function and reinforce best practices like DRY and clear separation of concerns.
This video doesn't have any notes.
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
Alright. Welcome back.
0:00
So if we take a look at the finished
preview, we'll see that
0:02
when the user selects a new breed via
the select menu,
0:05
it automatically fetches
an image of that newly selected breed.
0:08
We can also see
the breed is written in the button's text,
0:12
and that updates
when a new breed is selected as well.
0:16
Finally, clicking
the button loads a new random image
0:19
of the currently selected breed.
0:22
We got this. Let's do it.
0:24
So let's start with the select menu again.
0:27
I'm gonna go below
this event listener's comment,
0:32
and we want our select menu
dot add event listener.
0:34
And we want to listen for the change event
so that anytime
0:39
the selected value changes,
this will trigger.
0:42
So what needs to happen here?
0:48
Well, we need to fetch and display
a new image, so let's call our function.
0:49
And we wrote this
0:54
function
to also take in a breed as an argument,
0:55
so let's add an e here
so we have access to the event.
0:58
And let's pass in our newly selected value
1:02
with e dot target dot value.
1:05
Let's save this
and make sure it's working.
1:08
Refresh the page.
1:11
We've got our Affenpinscher.
1:13
Let's try selecting a new breed.
1:15
Let's say Akita.
1:16
And perfect.
1:19
It's fetching and displaying a random
Akita image.
1:20
Let's keep this momentum going.
1:24
Let's get this button
fetching a new image of this breed.
1:25
Okay.
1:29
So let's create another event listener,
this time on the fetch button.
1:30
I've already selected this element up top
and stored it in a variable.
1:34
We want to listen for clicks this time.
1:40
And, again, let's call our function.
1:50
And what do we pass in this time?
1:52
Well, we can get the value off
our select menu directly.
1:54
Select menu dot value.
1:58
Cool.
2:02
Let's save and test again.
2:02
Refresh, and the button
is getting us more aphin pinchers.
2:04
Nice.
2:08
Let's try another breed,
2:09
And let's try the button again.
2:15
It's working.
2:17
Awesome.
2:18
Let's wrap the core features up
by displaying the breed name
2:19
in our button here.
2:22
I'm going to create another helper
function here, and I'll just name it
2:23
update button text.
2:27
And this will take in a breed as well.
2:35
Now we can simply get our fetch button
and assign
2:38
its text content
a new value of a template literal.
2:40
Click for another,
2:47
and we'll plug in our breed here.
2:51
So this will need to be updated
2:55
right when the page loads
and every time a new breed is selected.
2:57
Right?
3:00
So I think it makes sense to
call this function at the end of our fetch
3:01
and display image function as this gets
called in both of those scenarios,
3:04
and we've got access to the current
breed already right here with breed.
3:08
Oh, I forgot this was here.
3:14
We can get rid of this URL comment
now too.
3:16
Awesome.
3:20
Let's check it out.
3:21
Fantastic.
3:24
It's updating perfectly.
3:25
I don't care
3:29
for the capitalization here,
but we'll let that slide.
3:29
And there's one more bit of cleanup
I'd like to handle here real quick.
3:32
I'm sure you've heard us all say stay dry.
3:35
Dry being an acronym
for don't repeat yourself.
3:38
Well,
if we look at both of our fetch functions,
3:41
if you wrote yours like mine,
we are repeating ourselves a bit, huh?
3:44
I mean, I literally copied
and pasted a block of code earlier.
3:47
Let's clean this up
3:51
by actually creating another function
to handle this primary fetching logic.
3:52
We want this to be as reusable
as possible.
3:56
I'm gonna go right up here above them.
3:59
This will also be async,
and let's just name it fetch data.
4:01
Since we want to use
this for any fetch calls we may need now
4:09
or in the future, let's have it
take in the desired URL as an argument.
4:12
I'll just name the parameter URL.
4:17
I'm gonna highlight and copy
our fetch, the okay check,
4:19
and our JSON parsing and paste
all that into this new function.
4:23
Perfect.
4:30
Let's remove
this URL string and pop in our passed
4:32
in argument with URL.
4:35
Then let's return response dot JSON.
4:38
So whenever we call this,
4:45
it will take care of getting our data,
checking if it worked out okay,
4:46
parsing it to a JavaScript object,
and then returning that.
4:50
Also, we don't need to wrap this code
within a try catch block again.
4:54
If an error occurs here,
it will be propagated
4:59
up to the next try catch
in the calling function,
5:01
So any errors here will be handled
where we're calling it.
5:04
If where we're calling it from
was not wrapped in a try block,
5:08
then we'd hit some issues,
and we need to add one in.
5:11
But this separation of fetching and error
handling logic is perfect,
5:13
so we can still handle specific errors
differently depending
5:18
on where we're calling this from.
5:21
Okay. So let's implement this.
5:22
We can now safely delete our JSON line
and our okay conditional.
5:24
Since I'm using the variable name
data down here, I'll rename this to that.
5:28
And we'll
change this to a call to fetch data
5:37
instead of fetch.
5:40
Let's do the same down here.
5:45
Remove the JSON line and our conditional.
5:47
Change this to data
5:51
and this to fetch data.
5:56
This is looking much nicer.
6:01
Let's save, refresh the browser, and check
if it's all working
6:03
still.
6:06
Cool.
6:11
The button is working,
6:11
and the select menu is working.
6:14
Perfect.
6:16
I've got one last little thing
I'd like to share with you
6:17
in the next video,
and I promise we'll finally be done.
6:20
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