1
00:00:00,360 --> 00:00:06,540
Hey, so we have our facts working and we also have our button working and we're getting the information

2
00:00:06,540 --> 00:00:10,350
from the page, so we're ready to move on to the next step where we're going to do something with that

3
00:00:10,350 --> 00:00:11,510
data that's returned.

4
00:00:11,850 --> 00:00:14,210
So we're going to have a function and we can just call this one.

5
00:00:14,220 --> 00:00:16,470
So it's going to take data in.

6
00:00:17,070 --> 00:00:21,930
And this will give us some flexibility on the data that's being returned back because the data is only

7
00:00:21,930 --> 00:00:25,030
ready in when this promise has been met.

8
00:00:25,050 --> 00:00:29,680
So once this promise, once the data and the connection has been made, it's got some type of returned

9
00:00:29,700 --> 00:00:36,720
data and then it takes the return data and makes it into a JavaScript object, passes it into the next

10
00:00:36,720 --> 00:00:38,910
promise, which is then and passing it.

11
00:00:38,910 --> 00:00:40,860
And then this is where we've got the usable data.

12
00:00:41,130 --> 00:00:46,050
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

13
00:00:46,050 --> 00:00:51,690
show and then we can loop through it and iterate through it and then just do all kinds of stuff with

14
00:00:51,690 --> 00:00:53,110
that data as it's coming in.

15
00:00:53,640 --> 00:00:57,350
So Consolo big data and we can loop through.

16
00:00:57,400 --> 00:01:02,160
So we're going to also because this is going to be an array of objects, we're going to have a length

17
00:01:02,190 --> 00:01:03,120
to it as well.

18
00:01:03,330 --> 00:01:08,760
And if we have a length, that means that we can loop through it so we can take data and use for each

19
00:01:08,970 --> 00:01:13,890
and loop through iterate through all the data and we can assign a variable to it.

20
00:01:13,890 --> 00:01:15,720
So I'm assigning video to it.

21
00:01:15,960 --> 00:01:21,150
So each one of those as we loop through is going to be output as video.

22
00:01:21,330 --> 00:01:25,110
And then this is going to be an object that, again, that we're going to loop through and we're going

23
00:01:25,110 --> 00:01:25,890
to make use of.

24
00:01:26,180 --> 00:01:31,230
So one of the things, too, as well, when we do return it back, all of the information that we want

25
00:01:31,230 --> 00:01:33,770
to make use of is contained within snippet.

26
00:01:34,110 --> 00:01:37,210
So it's within that object snippet that we want to utilize it.

27
00:01:37,500 --> 00:01:40,100
So that was one of the things that I did want to update.

28
00:01:40,110 --> 00:01:42,450
So let's bring this one and unquoted.

29
00:01:42,810 --> 00:01:46,440
So now let's try that one time and you can see what's being returned back in data.

30
00:01:46,560 --> 00:01:48,750
So this is the object that's being returned back.

31
00:01:48,870 --> 00:01:50,520
And there's a ton of information.

32
00:01:50,520 --> 00:01:55,350
The one that we want to utilize is we want to utilize items, as you see, within items.

33
00:01:55,470 --> 00:01:59,520
This is where all of that data for each one of those items is available.

34
00:01:59,790 --> 00:02:05,710
So let's take that information and return back and send data items into show.

35
00:02:05,750 --> 00:02:12,090
So we've got data items and we're going to send that into show and then that we sure can pick up that

36
00:02:12,090 --> 00:02:15,230
data and then we can see it being output into the console.

37
00:02:15,510 --> 00:02:20,580
So as we do our search, you can see now each and every one of these objects is being output.

38
00:02:20,710 --> 00:02:24,300
And now you can use these objects as we loop through them.

39
00:02:24,300 --> 00:02:29,370
And instead of putting them into the console, we can then output them into the visible area of the

40
00:02:29,370 --> 00:02:29,740
page.

41
00:02:30,000 --> 00:02:35,430
So how about we try that and we're going to create elements in place using document, create element

42
00:02:35,640 --> 00:02:38,930
and add in all of these created elements with the content.

43
00:02:39,060 --> 00:02:41,940
And you could pull any type of content that you want from here.

44
00:02:42,150 --> 00:02:47,490
As I said, there is a ton of stuff in here so you can go through and you can get the video ID.

45
00:02:47,490 --> 00:02:52,070
So this can be also used to create the URL to connect to the video.

46
00:02:52,200 --> 00:02:56,790
And then under snippet, this is where all that useful information like it's got the description there,

47
00:02:56,790 --> 00:03:00,440
it's got the title, it's got thumbnails when it was published.

48
00:03:00,600 --> 00:03:06,540
So all of this information is sitting within a snippet so you can go and traverse through that video

49
00:03:06,540 --> 00:03:09,600
object and get all of that information that you want to use.

50
00:03:10,080 --> 00:03:13,260
Let's let's go through that and do a quick set up of this.

51
00:03:13,590 --> 00:03:16,290
We're going to create some elements on the fly.

52
00:03:16,740 --> 00:03:24,420
So let's div and this is going to be our main container div using document create element element that

53
00:03:24,420 --> 00:03:29,320
we're creating a assistive and then as we create the div let's add a class to it.

54
00:03:29,330 --> 00:03:33,270
So class list and then doing add and the class that we're adding is Bloks.

55
00:03:33,270 --> 00:03:36,120
So that's not one class that we created in the first lesson.

56
00:03:36,540 --> 00:03:42,000
And then as we also iterate through there, you can update some of that inner text and enter content

57
00:03:42,000 --> 00:03:42,240
of it.

58
00:03:42,390 --> 00:03:44,700
You can create additional elements to hold that.

59
00:03:45,300 --> 00:03:48,080
You can also add and create temporary text nodes.

60
00:03:48,300 --> 00:03:49,750
So let's create one of those as well.

61
00:03:49,800 --> 00:03:50,730
So we'll call it.

62
00:03:51,330 --> 00:03:52,650
And we could create a text node.

63
00:03:52,860 --> 00:04:01,410
And this will contain all of the text information within video, and that's video snippet description

64
00:04:01,830 --> 00:04:05,040
and then take div append child to it.

65
00:04:05,370 --> 00:04:09,060
And the child that we're spending is that new div that we created that text node.

66
00:04:09,480 --> 00:04:13,620
You can also add in a link if you want it to expand, it's going to hold the link.

67
00:04:14,010 --> 00:04:19,470
So spane and document and of course you can store these as needed.

68
00:04:19,470 --> 00:04:22,310
So span we do are going to have the hyperlink here.

69
00:04:22,590 --> 00:04:32,280
So in our HTML and then the inner HTML here is going to be going to a page located at HTTP and the usual

70
00:04:32,280 --> 00:04:33,870
for YouTube videos.

71
00:04:34,200 --> 00:04:40,440
And so here we're going to just break out of the string and then break back into it and target target

72
00:04:40,440 --> 00:04:40,800
blank.

73
00:04:41,010 --> 00:04:49,170
And we can add the video title here under video snippet title and is expecting the object information.

74
00:04:49,200 --> 00:04:50,880
So this is video ID.

75
00:04:51,180 --> 00:04:53,850
We might have to double check that just to make sure that it is working.

76
00:04:54,060 --> 00:04:59,520
So does look like that worked it out, put it properly and all of this object information actually getting

77
00:04:59,520 --> 00:04:59,790
from.

78
00:04:59,840 --> 00:05:05,270
Here, so we see that we've got the snippet here and a snippet, there's a description, there's title.

79
00:05:05,280 --> 00:05:09,230
So that's what's going to get returned back within that object and as well as ID.

80
00:05:09,380 --> 00:05:11,000
And then we've got video ID.

81
00:05:11,010 --> 00:05:14,750
So I need to update that to have video ID instead of just ID.

82
00:05:15,050 --> 00:05:18,590
So video ID make sure that you do spell it properly.

83
00:05:18,600 --> 00:05:20,140
So it is case sensitive.

84
00:05:20,420 --> 00:05:22,440
So we are ready to add it to the piece.

85
00:05:22,510 --> 00:05:31,910
It looked like that worked properly and we can now use the Divx and append child and append the span

86
00:05:31,910 --> 00:05:34,940
to there and then I'll put up hand.

87
00:05:34,940 --> 00:05:40,520
Child support is that main element Divx object that we have and append the div to that one.

88
00:05:40,970 --> 00:05:48,230
So now when I press search, it should create all of the elements with the values coming from the API

89
00:05:48,380 --> 00:05:49,860
as well as a link to the videos.

90
00:05:50,570 --> 00:05:51,650
So this is kind of big.

91
00:05:51,680 --> 00:05:53,870
So let me let me make this a little bit smaller.

92
00:05:54,680 --> 00:05:56,960
And of course, this is all coming from the API.

93
00:05:57,110 --> 00:06:01,700
I probably do need to make a space there or something else because that's kind of throwing off the way

94
00:06:01,700 --> 00:06:03,110
that it's looking.

95
00:06:03,260 --> 00:06:07,340
But you get the idea here that we've got the description of the video and then we've got the title of

96
00:06:07,340 --> 00:06:09,410
the video and we can click and link it.

97
00:06:09,500 --> 00:06:11,500
And you can see you can open up the YouTube video.

98
00:06:12,470 --> 00:06:14,210
So now of course, we can style it.

99
00:06:14,210 --> 00:06:18,570
And there's a whole bunch more information that's contained within the object that we can make use of.

100
00:06:18,830 --> 00:06:24,220
So within that snippet, there's also the channel ID, the channel title description.

101
00:06:24,620 --> 00:06:29,630
There's also some thumbnails here as well as the default one, and there's high and medium.

102
00:06:30,500 --> 00:06:34,000
And you can also output these onto the page as needed.

103
00:06:34,460 --> 00:06:35,810
So go ahead and try this out.

104
00:06:36,080 --> 00:06:40,040
And coming up, we'll apply a little bit more styling and make it look a little bit more neat.

105
00:06:40,430 --> 00:06:42,140
So that's still to come in the upcoming LESSEM.