Transcript from the "Fetching Data Solution" Lesson
[00:00:00]
>> Brian Holt: We left it in kind of estate yesterday. As you can see here, that if I change the drop down, it will log out the correct URL, right? So, let's go ahead and start from that point, and we'll get going.
>> Brian Holt: So, all this can stay the same.
[00:00:25]
>> Brian Holt: And we're going to relatively reuse some of this logic here that we had from the addDoggo Go button up here.
>> Brian Holt: But there's a couple of ways that you could have solved this. The way that we were doing with add-doggo button is we're creating a new image tag every single time.
[00:00:43]
What I'm going to do here is, I'm just going to put an image tag in the HTML, and then I'm just going to change the source every single time. Okay, so rather than have like dogs and a pen child in here, I'm just going to put here and just have like my dog image in here, and then I'll just change it from here.
[00:01:09]
Let's go ahead and have to start out being some sort of picture from like place corgi or something like that, placecorgi.com. I'm just going to grab a URL from here. This is the best website by the way, you are never disappointed by this site.
>> Brian Holt: Okay, and put that there.
[00:01:35]
But I don't really care what it is as long as they have some image to kind of so that the user immediately sees something. And this is going to be a doggo. Okay, and I'm going to get rid of the button because we don't need that anymore. It's coming back over here, now you can see that there's a corgi picture.
[00:02:00]
Let's actually put that up underneath the selector, I think that will be better. Okay, let's save that and refresh.
>> Brian Holt: Whatever, not going for CSS today, so
>> Brian Holt: Next thing, we want to do is if when I change this to be something I wanted to change whatever pictures in there.
[00:02:28]
So, what I'm going to do is just get doggo, well, we'll just rewrite it. I think that's fine, we'll rewrite it. So, I'm going to write a function down here called get doggo function Get doggo. It's going to take in a URL because we're already constructing it up here, so we might as well use it.
[00:02:59]
And from here, we're going to fetch that URL.
>> Brian Holt: Then, we're going to take that data and we're going to function, data, or response, whatever you want to call it. We're going to return response.json.
>> Brian Holt: And then, we're going to get our data back.
>> Brian Holt: [INAUDIBLE] so now yeah, go on.
[00:03:36]
>> Speaker 2: So, remind me the response that JSON that converts whatever the response is to JSON, if it's not already
>> Brian Holt: Right, so just so you know, if I hit response dot, you can see here that it actually has quite a few things in here. It could be a blog that's one of the things that could be.
[00:03:53]
Blobs are going to be things like images, they're going to be basically some, just a blob of data, some in-specific thing, often images. It could just be normal text, right? It could be several things, most are going to be JSON though, yeah.
>> Speaker 3: And response, is that a key word like function that's just there?
[00:04:15]
>> Brian Holt: Nope, it can be whatever you want. Often-
>> Speaker 3: You can put anything there?
>> Brian Holt: Yep, so often, I will shorten this to res, because I'm lazy. So, as long as it matches the parameters, and when you see parameters in functions it never matters what they are.
>> Brian Holt: It is literally variable name.
[00:04:37]
Just like you can call your variable whatever you want you can call your parameters whatever you want. That answer your question? Cool. Once we have that data, I'm going to go up here and get a hold of my image of contest. Image equals document, get a query selector like what I call dog dash image said sound right to someone.
[00:05:02]
Dog dash image
>> Brian Holt: So, once I had that data back so data dot message now is going to be whatever my image is going to whatever I want it to be. So, I should be able to say image.src = data.message.
>> Brian Holt: Right only because I haven't done a loading spinner yet, and I'll show you how to do that here in just a second.
[00:05:27]
But.
>> Brian Holt: They should at least now every time that we call get dog with the correct URL, it should go out and get the correct image.
>> Brian Holt: So, now we have to call get dog from our event listener up here.
>> Brian Holt: And I called this just get dog hope somewhere.
[00:05:45]
>> Brian Holt: Change that and URL is going to be this. Okay, so now I should be able to refresh over here. And hopefully, if I change this, it is changing this image is
>> Brian Holt: How do we feel about that so far, look good? So, if you remember up here we construct a select using the information for the API.
[00:06:35]
Here we are the event listener for change, to call this function. So, anytime that someone selects a beagle, or something like that, event or target that value, this right here is going to be beagle. It's going to be whatever the user selected, okay? So, that constructs our URL to go out to the dog API to get a random image.
[00:06:56]
We pass that URL we can construct right there into getDoggo, okay? We go down to getDoggo right there with that URL being pass into it. We then call the dog API again,
>> Brian Holt: Transform that into like a usable JavaScript object here, which it ends up here as data.
[00:07:18]
And then, we know that data.message is fact if you want to see that
>> Brian Holt: Call African or something like that, you can see there. It comes back as images.dog.ceo. And that's the message which is what data.message corresponds to that object right there.