Transcript from the "Populating the Dropdown" Lesson
[00:00:00]
>> Brian Holt: As soon as you request the breeds list, what you're gonna do with it?
>> Brian Holt: So this data comes from the API, in fact, if you look here in my network console.
>> Brian Holt: Refresh.
>> Brian Holt: If I go to response, yeah, notice it's getting all these from the API, right.
[00:00:32]
And that's what populating this drop down up here.
>> Brian Holt: So, let's go look at how we would kind of do that using our code here. So we're gonna get the breeds list off. We're gonna just work through this together and then I'll let you do the rest by yourself.
[00:00:59]
>> Brian Holt: So, let's just go ahead and I'm gonna,
>> Brian Holt: Const, BREEDS_URL equals dot, right? So that's gonna get all of the breeds from the API.
>> Brian Holt: We're gonna do a fetch(BREEDS_URL), right, just like we did before, dot then. We're gonna get back our response, we're going to return response.json, and then dot then after that.
[00:01:44]
>> Brian Holt: This is gonna be all of the data that we get back. Or, yeah, I'm using arrow functions here, but you can also use function,
>> Brian Holt: Just do it this way, response function data, okay. So let's just const a log this out right here. Console.log, breeds our data dot, whatever.
[00:02:16]
Come back over here to our dog viewer. We have, not this one, this one.
>> Brian Holt: So if we look here at the console,
>> Brian Holt: Notice that the message here is all the breeds, right. So, we got all that back from the API.
>> Brian Holt: Should be seeing this, right?
[00:02:49]
It's just line 24 through line 32 there. That's all the code that we're concern about.
>> Brian Holt: Now what I'm wanna do is I'm gonna take this and turn it into a select box, right?
>> Brian Holt: So, what we're gonna do, this is an object, and I want to access every key in the object.
[00:03:25]
So if you remember, we talked about console.log(Objects.keys(data.message)).
>> Brian Holt: Talk about that here in a second, but now notice this is an array.
>> Brian Holt: So to make a little bit clear, so const breedsObject=data.message. Right, this is the object full of dog breeds. And then if I wanna get all the const breedsArray, I wanna make that object.keys(breedsObject), oops.
[00:04:23]
>> Brian Holt: Make sense, good so far? Now, I'm gonna do something really similar to what I was doing up here, where I was creating image tags.
>> Brian Holt: I'm gonna create a bunch of options. So let's go to our index.html really quick. I'm gonna put a select here, class equals, we'll call this breeds.
[00:04:58]
>> Brian Holt: Okay, and if I refresh over here, now I have this empty drop down underneath the add doggo button, right, nothing's in it yet. And all I did was I add line 14,
>> Brian Holt: Here in doggos, the js file. I'm gonna grab that breed selector as a const select equals document.
[00:05:24]
>> Brian Holt: Get, or query rather, query selector breeds. Let's make this a little bit bigger.
>> Brian Holt: And I'm gonna do a for loop here, for let i = 0, i is less than breedsarray.length i++). And then for each one of these breeds, I wanna create an option inside of the select, right?
[00:05:57]
So I'm gonna say, const option = document.get, or rather create element. Option, just like we do with the image, right, we're creating an option tag for the dom. We're gonna say, option.value.
>> Brian Holt: Equals breeds array I, cuz if you remember, if you're doing drop downs, you have to have an option because that's what's actually going to be selected whenever you select the option in the drop down here.
[00:06:50]
And then we're also gonna say, option.intertext equals the same thing.
>> Brian Holt: Okay, now we have an option that's ready to be inserted into our application. So I'm gonna say select.appendChild(option). So now hopefully, if we refresh over here. Nothing will happen.
>> Brian Holt: So that's fun, let's see why that's happening.
[00:07:44]
>> Brian Holt: Dot breeds, [LAUGH] I did the same thing you did. [LAUGH] It's the other direction though. All right, so now there we go.
>> Brian Holt: So what I messed up was on line 35 here. I forgot the period because you have to be selecting the class breeds.
>> Speaker 2: On line 32, what is object again?
[00:08:07]
>> Brian Holt: BreedsObject? What is like, this object?
>> Brian Holt: It's something that JavaScript makes available to you. So, there's a bunch of other thing that objects can do for you. In this particular case, we're just gonna use the keys function to get all the keys out of an object.
>> Speaker 2: An object would be the data that you're getting in?
[00:08:27]
>> Brian Holt: Right, it does-
>> Speaker 2: Or the message, the breedsObject?
>> Brian Holt: Yeah, the breedsObject, here they got from data.message.
>> Speaker 2: So why are we not calling it breedsObject, how does it know that object means breedsObject and not any other object?
>> Brian Holt: So, if I'll actually just come in here, it is a good question.
[00:08:46]
So if I type an object here, this is actually a whole JavaScript class Universally available everywhere, right? So, this object refers to this helper object that's available. Like we were using date as well, right? Said that this is a similar thing that it's just a helper for working with objects.
[00:09:05]
>> Speaker 2: Okay.
>> Brian Holt: Does that answer your question?
>> Speaker 2: Yeah.
>> Brian Holt: So object.keys is a function that you pass in an object and it gives you back an array. That's the entire magic there.
>> Speaker 2: And I couldn't say const breedsArray is breeds object.keys or something?
>> Brian Holt: Nope, this is how you have to do it.
[00:09:27]
There are other ways to do it. In fact, this is relatively new. But this is one line as opposed to like five lines. Does that answer your question?
>> Speaker 2: Mm-hm.
>> Brian Holt: Cool, yeah.
>> Speaker 3: I'm just wondering the difference since we are now working with an array, why we're using create element and append child verses push or pop, have you talked about it?
[00:09:51]
>> Brian Holt: Yeah, so that's a great question. When we're doing arrays here, that those have methods on for push and pop and all that kind of stuff. So if I wanted to add another breed in here, I could totally say like breeds array.push. And just cuz I'm better I'm gonna put push have a nice in there.
[00:10:12]
I have, spell nice, this would totally work because this is an array, right, but what is select here? Select is actually a dom element, right, its not an array. So this is the way you add something inside of a dom element or a tag, right. This is the, if we are looking at our HTML, it represents this.
[00:10:35]
Right, so that's not an array, so it doesn't have push on it. The only thing that you can do here is you can append new things inside of it using this method here called appendChild. And that it's just the name of the method. They could have called it push but they called it appendChild.