1 00:00:00,240 --> 00:00:06,900 This lesson, we are going to be looking at JavaScript, not so the prototype map, what this does is 2 00:00:06,900 --> 00:00:14,970 essentially lets us rebuild an array so some conditions and output a different value, output, different 3 00:00:14,970 --> 00:00:16,230 values for the array. 4 00:00:16,470 --> 00:00:22,650 So this is ideal because with the content that's being returned back from Google, as you can see, 5 00:00:22,650 --> 00:00:25,260 there's a lot of content and we're not actually using all of it. 6 00:00:25,290 --> 00:00:27,330 So we're using the title description. 7 00:00:27,360 --> 00:00:29,310 We might use the default thumbnail. 8 00:00:29,490 --> 00:00:30,960 So and that's all really it. 9 00:00:30,960 --> 00:00:32,300 And as well as the ID. 10 00:00:32,520 --> 00:00:39,330 So the best option really is that when we are passing that information into show, if that's the only 11 00:00:39,330 --> 00:00:44,910 information that we're passing in instead of that full object, let's restructure that object. 12 00:00:44,920 --> 00:00:50,640 And this is a really useful way to rebuild that object so that you can utilize it more efficiently within 13 00:00:50,640 --> 00:00:51,050 show. 14 00:00:51,240 --> 00:00:56,490 So let's try this and we're getting all of the information in as data and using map. 15 00:00:56,490 --> 00:01:01,440 So the same way that it's presented here where they've got an array, they've got a bunch of values 16 00:01:01,440 --> 00:01:07,830 that we're passing into that map prototype and then map prototype has multiple taking all those values. 17 00:01:07,830 --> 00:01:13,170 So those values are represented with X. It's returning back all of those values multiplied by two. 18 00:01:13,320 --> 00:01:14,940 So X multiplied by two. 19 00:01:15,120 --> 00:01:21,500 So at the end map, one is equal to an array of two, eight, 18 and 32. 20 00:01:21,510 --> 00:01:23,180 So those are all multiplied by two. 21 00:01:23,190 --> 00:01:25,050 So it's rebuilt that array object. 22 00:01:25,200 --> 00:01:30,870 And that's exactly what we want to do in our instance, where we want to rebuild the data items and 23 00:01:30,870 --> 00:01:33,000 utilize just those values. 24 00:01:33,000 --> 00:01:39,210 Set a variable that's going to hold the brand new returned values so we can call it data one and then 25 00:01:39,210 --> 00:01:42,260 using the data items object. 26 00:01:42,360 --> 00:01:47,520 So this is the same one that we're sending over to show we're going to apply the map, prototype to 27 00:01:47,520 --> 00:01:52,110 it and then using function where we're going to take in the value of the item. 28 00:01:52,530 --> 00:01:57,890 Just call it X for now and we're going to rebuild data one from data items. 29 00:01:58,290 --> 00:02:03,740 So returning back and just as we saw with in example at the Mozilla Developer Network. 30 00:02:04,050 --> 00:02:07,200 So we're going to return back a brand new object. 31 00:02:07,440 --> 00:02:10,320 And the object that we're returning back is going to have a title. 32 00:02:10,740 --> 00:02:15,150 So that's one of the values that we want to look for and taking X snippet. 33 00:02:15,570 --> 00:02:21,210 So this is going to be the same thing that we saw as we're sending data items over and we're getting 34 00:02:21,210 --> 00:02:23,190 that video snippet title. 35 00:02:23,340 --> 00:02:28,230 So in this case, we're getting the snippet title and we're just going to return it back as title within 36 00:02:28,230 --> 00:02:28,770 the object. 37 00:02:29,100 --> 00:02:31,020 The other one that we want it is the description. 38 00:02:31,020 --> 00:02:33,810 So I can shorten that and the same format again. 39 00:02:33,810 --> 00:02:38,970 So X snippet description, another one that we could use as well. 40 00:02:38,980 --> 00:02:41,700 So I'll also include the image. 41 00:02:41,850 --> 00:02:44,450 So this is where the default thumbnail is. 42 00:02:44,670 --> 00:02:49,680 So we've got our image and that's under snippet and thumbnail. 43 00:02:50,010 --> 00:02:53,440 So sometimes you do have to go back to that object just to refer to it. 44 00:02:53,700 --> 00:02:59,640 So navigating through the objects, so we've got thumbnails and then we've got default and then under 45 00:02:59,640 --> 00:03:01,220 default, there's Eurail. 46 00:03:01,230 --> 00:03:02,730 So it's a fairly long object. 47 00:03:02,910 --> 00:03:09,750 And this is why map is so useful, because when you do have these objects, sometimes they're not structured 48 00:03:09,750 --> 00:03:11,080 and it's not easy to find it. 49 00:03:11,250 --> 00:03:16,140 So when you can rebuild it with MAP and then send that instead, it's so much more ideal. 50 00:03:16,380 --> 00:03:19,620 And you can also send the ID, of course, as well. 51 00:03:19,620 --> 00:03:25,100 So you can call it ID and we can just get X video. 52 00:03:25,410 --> 00:03:30,420 And this one again was the same path as what we're doing down here, but it's just shortened it. 53 00:03:30,420 --> 00:03:34,170 So it's taken that idea and it's just been a positon aside. 54 00:03:34,530 --> 00:03:40,010 And of course if you want to passan that full X, you can pass that in as well. 55 00:03:40,200 --> 00:03:41,430 So we're not going to be using that. 56 00:03:41,430 --> 00:03:45,540 But I'll just pass that just to show you that that's going to be able to be utilized as well. 57 00:03:45,690 --> 00:03:52,530 So now, instead of data items, we're going to just simply pass in data one that data one object and 58 00:03:52,530 --> 00:03:53,610 then going down here. 59 00:03:53,610 --> 00:03:55,410 So our content is going to be different. 60 00:03:55,410 --> 00:03:57,810 It's no longer going to work within this format. 61 00:03:57,960 --> 00:04:02,100 And as you can see when I refresh and if I search, we're going to throw some errors. 62 00:04:02,370 --> 00:04:05,670 So we are getting errors and we are passing that information in. 63 00:04:05,760 --> 00:04:10,940 But now we've got a much neater object where we've got description, ID, image title. 64 00:04:11,070 --> 00:04:18,600 So now as we're passing this information in, it's going to be contained within the object the same 65 00:04:18,600 --> 00:04:18,830 way. 66 00:04:18,840 --> 00:04:22,650 So we're passing in the video outputting the video into the console. 67 00:04:22,800 --> 00:04:27,990 And you can see that now this video object is going to be a lot neater structured. 68 00:04:27,990 --> 00:04:33,990 So we've got the description there so we can get rid of some of the snippet here and we can just return 69 00:04:33,990 --> 00:04:38,050 back to the description as we've structured the object to be presented. 70 00:04:38,400 --> 00:04:42,020 There's also video ID so we can get rid of that part. 71 00:04:42,630 --> 00:04:45,480 And this can also make a lot more sense as well. 72 00:04:45,660 --> 00:04:52,350 So title, we're going to keep that the same and also want to reorganize where we're putting the temp 73 00:04:52,350 --> 00:04:53,360 and the span. 74 00:04:53,610 --> 00:04:57,910 So let's do the spane first because that holds the title and then the temp afterwards. 75 00:04:58,200 --> 00:04:59,670 So now when we search. 76 00:04:59,810 --> 00:05:06,170 This time it should work and we're getting the output properly into the console and as you can see, 77 00:05:06,380 --> 00:05:08,330 we're getting the same information back. 78 00:05:08,480 --> 00:05:11,900 But on the coding side of it, it's a lot neater structured. 79 00:05:12,170 --> 00:05:16,780 So this was a very useful thing that you can do in order to structure more useful. 80 00:05:17,210 --> 00:05:20,860 And I'm also going to get rid of that output content so we don't have to see that. 81 00:05:21,620 --> 00:05:27,070 So try that again and you can see that it's being presented nice and neatly within the page. 82 00:05:27,560 --> 00:05:33,770 So add that into your project and I'll also show you how we can update some of the functionality with 83 00:05:33,770 --> 00:05:37,130 the fetch as well and also catch for errors. 84 00:05:37,260 --> 00:05:38,840 So that's coming up in the next lesson.