This lesson, we are going to be looking at JavaScript, not so the prototype map, what this does is
essentially lets us rebuild an array so some conditions and output a different value, output, different
values for the array.
So this is ideal because with the content that's being returned back from Google, as you can see,
there's a lot of content and we're not actually using all of it.
So we're using the title description.
We might use the default thumbnail.
So and that's all really it.
And as well as the ID.
So the best option really is that when we are passing that information into show, if that's the only
information that we're passing in instead of that full object, let's restructure that object.
And this is a really useful way to rebuild that object so that you can utilize it more efficiently within
show.
So let's try this and we're getting all of the information in as data and using map.
So the same way that it's presented here where they've got an array, they've got a bunch of values
that we're passing into that map prototype and then map prototype has multiple taking all those values.
So those values are represented with X. It's returning back all of those values multiplied by two.
So X multiplied by two.
So at the end map, one is equal to an array of two, eight, 18 and 32.
So those are all multiplied by two.
So it's rebuilt that array object.
And that's exactly what we want to do in our instance, where we want to rebuild the data items and
utilize just those values.
Set a variable that's going to hold the brand new returned values so we can call it data one and then
using the data items object.
So this is the same one that we're sending over to show we're going to apply the map, prototype to
it and then using function where we're going to take in the value of the item.
Just call it X for now and we're going to rebuild data one from data items.
So returning back and just as we saw with in example at the Mozilla Developer Network.
So we're going to return back a brand new object.
And the object that we're returning back is going to have a title.
So that's one of the values that we want to look for and taking X snippet.
So this is going to be the same thing that we saw as we're sending data items over and we're getting
that video snippet title.
So in this case, we're getting the snippet title and we're just going to return it back as title within
the object.
The other one that we want it is the description.
So I can shorten that and the same format again.
So X snippet description, another one that we could use as well.
So I'll also include the image.
So this is where the default thumbnail is.
So we've got our image and that's under snippet and thumbnail.
So sometimes you do have to go back to that object just to refer to it.
So navigating through the objects, so we've got thumbnails and then we've got default and then under
default, there's Eurail.
So it's a fairly long object.
And this is why map is so useful, because when you do have these objects, sometimes they're not structured
and it's not easy to find it.
So when you can rebuild it with MAP and then send that instead, it's so much more ideal.
And you can also send the ID, of course, as well.
So you can call it ID and we can just get X video.
And this one again was the same path as what we're doing down here, but it's just shortened it.
So it's taken that idea and it's just been a positon aside.
And of course if you want to passan that full X, you can pass that in as well.
So we're not going to be using that.
But I'll just pass that just to show you that that's going to be able to be utilized as well.
So now, instead of data items, we're going to just simply pass in data one that data one object and
then going down here.
So our content is going to be different.
It's no longer going to work within this format.
And as you can see when I refresh and if I search, we're going to throw some errors.
So we are getting errors and we are passing that information in.
But now we've got a much neater object where we've got description, ID, image title.
So now as we're passing this information in, it's going to be contained within the object the same
way.
So we're passing in the video outputting the video into the console.
And you can see that now this video object is going to be a lot neater structured.
So we've got the description there so we can get rid of some of the snippet here and we can just return
back to the description as we've structured the object to be presented.
There's also video ID so we can get rid of that part.
And this can also make a lot more sense as well.
So title, we're going to keep that the same and also want to reorganize where we're putting the temp
and the span.
So let's do the spane first because that holds the title and then the temp afterwards.
So now when we search.
This time it should work and we're getting the output properly into the console and as you can see,
we're getting the same information back.
But on the coding side of it, it's a lot neater structured.
So this was a very useful thing that you can do in order to structure more useful.
And I'm also going to get rid of that output content so we don't have to see that.
So try that again and you can see that it's being presented nice and neatly within the page.
So add that into your project and I'll also show you how we can update some of the functionality with
the fetch as well and also catch for errors.
So that's coming up in the next lesson.