Hey, so we have our facts working and we also have our button working and we're getting the information
from the page, so we're ready to move on to the next step where we're going to do something with that
data that's returned.
So we're going to have a function and we can just call this one.
So it's going to take data in.
And this will give us some flexibility on the data that's being returned back because the data is only
ready in when this promise has been met.
So once this promise, once the data and the connection has been made, it's got some type of returned
data and then it takes the return data and makes it into a JavaScript object, passes it into the next
promise, which is then and passing it.
And then this is where we've got the usable data.
So at this point is where we want to send it over to show and we're going to pick it up as data within
show and then we can loop through it and iterate through it and then just do all kinds of stuff with
that data as it's coming in.
So Consolo big data and we can loop through.
So we're going to also because this is going to be an array of objects, we're going to have a length
to it as well.
And if we have a length, that means that we can loop through it so we can take data and use for each
and loop through iterate through all the data and we can assign a variable to it.
So I'm assigning video to it.
So each one of those as we loop through is going to be output as video.
And then this is going to be an object that, again, that we're going to loop through and we're going
to make use of.
So one of the things, too, as well, when we do return it back, all of the information that we want
to make use of is contained within snippet.
So it's within that object snippet that we want to utilize it.
So that was one of the things that I did want to update.
So let's bring this one and unquoted.
So now let's try that one time and you can see what's being returned back in data.
So this is the object that's being returned back.
And there's a ton of information.
The one that we want to utilize is we want to utilize items, as you see, within items.
This is where all of that data for each one of those items is available.
So let's take that information and return back and send data items into show.
So we've got data items and we're going to send that into show and then that we sure can pick up that
data and then we can see it being output into the console.
So as we do our search, you can see now each and every one of these objects is being output.
And now you can use these objects as we loop through them.
And instead of putting them into the console, we can then output them into the visible area of the
page.
So how about we try that and we're going to create elements in place using document, create element
and add in all of these created elements with the content.
And you could pull any type of content that you want from here.
As I said, there is a ton of stuff in here so you can go through and you can get the video ID.
So this can be also used to create the URL to connect to the video.
And then under snippet, this is where all that useful information like it's got the description there,
it's got the title, it's got thumbnails when it was published.
So all of this information is sitting within a snippet so you can go and traverse through that video
object and get all of that information that you want to use.
Let's let's go through that and do a quick set up of this.
We're going to create some elements on the fly.
So let's div and this is going to be our main container div using document create element element that
we're creating a assistive and then as we create the div let's add a class to it.
So class list and then doing add and the class that we're adding is Bloks.
So that's not one class that we created in the first lesson.
And then as we also iterate through there, you can update some of that inner text and enter content
of it.
You can create additional elements to hold that.
You can also add and create temporary text nodes.
So let's create one of those as well.
So we'll call it.
And we could create a text node.
And this will contain all of the text information within video, and that's video snippet description
and then take div append child to it.
And the child that we're spending is that new div that we created that text node.
You can also add in a link if you want it to expand, it's going to hold the link.
So spane and document and of course you can store these as needed.
So span we do are going to have the hyperlink here.
So in our HTML and then the inner HTML here is going to be going to a page located at HTTP and the usual
for YouTube videos.
And so here we're going to just break out of the string and then break back into it and target target
blank.
And we can add the video title here under video snippet title and is expecting the object information.
So this is video ID.
We might have to double check that just to make sure that it is working.
So does look like that worked it out, put it properly and all of this object information actually getting
from.
Here, so we see that we've got the snippet here and a snippet, there's a description, there's title.
So that's what's going to get returned back within that object and as well as ID.
And then we've got video ID.
So I need to update that to have video ID instead of just ID.
So video ID make sure that you do spell it properly.
So it is case sensitive.
So we are ready to add it to the piece.
It looked like that worked properly and we can now use the Divx and append child and append the span
to there and then I'll put up hand.
Child support is that main element Divx object that we have and append the div to that one.
So now when I press search, it should create all of the elements with the values coming from the API
as well as a link to the videos.
So this is kind of big.
So let me let me make this a little bit smaller.
And of course, this is all coming from the API.
I probably do need to make a space there or something else because that's kind of throwing off the way
that it's looking.
But you get the idea here that we've got the description of the video and then we've got the title of
the video and we can click and link it.
And you can see you can open up the YouTube video.
So now of course, we can style it.
And there's a whole bunch more information that's contained within the object that we can make use of.
So within that snippet, there's also the channel ID, the channel title description.
There's also some thumbnails here as well as the default one, and there's high and medium.
And you can also output these onto the page as needed.
So go ahead and try this out.
And coming up, we'll apply a little bit more styling and make it look a little bit more neat.
So that's still to come in the upcoming LESSEM.