1
00:00:02,110 --> 00:00:08,290
This lesson, we're going to be making a GitHub API connection, a little mini application.

2
00:00:10,730 --> 00:00:17,150
And first off, it's going to be loading one of the GitHub Zen quotes, so it's coming from API, GitHub,

3
00:00:17,150 --> 00:00:18,210
Dotcom, Zen.

4
00:00:18,530 --> 00:00:22,250
So every time we refresh the page, we get a nice new Zen quote.

5
00:00:22,520 --> 00:00:29,210
And then we can also search the repositories for whatever value we want for want something called test

6
00:00:29,540 --> 00:00:32,870
test or let's do test JavaScript.

7
00:00:33,270 --> 00:00:34,660
Let's see what gets returned back.

8
00:00:34,910 --> 00:00:39,950
So there's our request and that's going to return back something like this.

9
00:00:40,250 --> 00:00:45,190
So really massive JSON object that's got multiple items within the array.

10
00:00:46,040 --> 00:00:54,020
And what we're doing is we're taking the contents of that JSON object and we're extracting the information

11
00:00:54,020 --> 00:00:56,150
that we want and the property values that we want.

12
00:00:56,630 --> 00:00:58,520
And then we're outputting some of them on the page.

13
00:01:00,050 --> 00:01:05,040
We're also going to be connecting just to the one repoll and outputting that on the page as well.

14
00:01:05,810 --> 00:01:11,750
So it's going to be a nice flexible application that allows you to search the GitHub repositories,

15
00:01:11,990 --> 00:01:21,860
provide the URL and also some information about the name, also the IDs for the owner and for the repository,

16
00:01:21,980 --> 00:01:24,360
and then a link to the repository itself.

17
00:01:24,860 --> 00:01:26,390
And this is an open API.

18
00:01:26,560 --> 00:01:32,600
It's a good way to practice and become more familiar with what you can do with JavaScript and fetch

19
00:01:32,810 --> 00:01:39,350
and then also return back some of the content to the page code and create a brand new JavaScript file.

20
00:01:39,350 --> 00:01:41,540
And we're going to be linking to the same HTML file.

21
00:01:41,540 --> 00:01:47,210
So using new JavaScript file and is going to call it pro to dot G.S..

22
00:01:47,210 --> 00:01:51,790
So creating the new file and then save that file as a prototype G.S..

23
00:01:52,100 --> 00:01:54,260
So this is for our second project.

24
00:01:54,260 --> 00:02:00,470
We're going to dive deeper into fetch and how fetch works and how we can change together fetched promises

25
00:02:00,470 --> 00:02:06,150
as we continue to practice writing JavaScript code and making fetch requests and returning back data.

26
00:02:06,470 --> 00:02:15,320
So within each HTML file, first of all, let's set up our container's so selecting the elements output

27
00:02:15,320 --> 00:02:20,630
and using the query selector, let's go ahead and select the element with a class of output so that

28
00:02:20,630 --> 00:02:27,020
we have somewhere where we can write content into and then also will select the button object using

29
00:02:27,020 --> 00:02:35,240
that button query selector, select the element with a class of button so that we have access to both

30
00:02:35,240 --> 00:02:36,390
of those page elements.

31
00:02:36,410 --> 00:02:38,750
I'm also going to toggle the word wrap.

32
00:02:38,750 --> 00:02:46,610
So some of the text there within the code editor was going off to the right hand side, so toggling

33
00:02:46,610 --> 00:02:46,970
the view.

34
00:02:46,970 --> 00:02:50,570
So it wraps the code so that we can better see it as we're developing it.

35
00:02:51,230 --> 00:02:54,800
So adding in the event listener to the button one.

36
00:02:55,220 --> 00:02:59,120
So add an event, listener and event that we're listening for is going to be a click.

37
00:02:59,420 --> 00:03:02,960
So whenever that button gets clicked, then we want to do something.

38
00:03:02,960 --> 00:03:06,320
And this is where we want to create our fetch request.

39
00:03:06,770 --> 00:03:12,760
And the way that fetch works is that the French method requires you URL.

40
00:03:13,190 --> 00:03:18,560
So in this case we'll still work with a local file and will create a local JSON file and then we'll

41
00:03:18,560 --> 00:03:22,620
connect to a Web API with a similar type JSON file.

42
00:03:22,970 --> 00:03:33,260
So starting and let's just save this as proto, Jason, so that we're linking to from the JavaScript

43
00:03:33,260 --> 00:03:37,880
file to the JSON and within here, let's create an object.

44
00:03:38,120 --> 00:03:45,080
And then this object might have some information like an ID, so this can be a number and then comma

45
00:03:45,080 --> 00:03:46,120
separated out.

46
00:03:46,670 --> 00:03:53,270
So this can also maybe have a name as well, trust content.

47
00:03:54,020 --> 00:03:57,800
And there might be a more complex object here.

48
00:03:57,800 --> 00:03:59,630
So an object within an object.

49
00:03:59,840 --> 00:04:01,750
So it doesn't always have to be an array.

50
00:04:02,270 --> 00:04:04,850
Sometimes the objects can be several deep.

51
00:04:05,330 --> 00:04:09,560
So within this owner, there might also be an account for an ID.

52
00:04:09,620 --> 00:04:15,230
So each one of the owners has an ID as well as there's an ID for the item that we're fetching.

53
00:04:17,270 --> 00:04:19,790
And then this can also be just a No.

54
00:04:22,020 --> 00:04:24,300
And let's add in one more item here.

55
00:04:24,780 --> 00:04:33,210
So this this is just going to be whatever the language is, and let's say that the language to be JavaScript.

56
00:04:36,470 --> 00:04:44,090
So a very simple object that we're going to connect to and connect to that using the JavaScript and

57
00:04:44,090 --> 00:04:47,990
fetch and we'll walk you through exactly what's going to happen with the Fach.

58
00:04:48,200 --> 00:04:55,430
So we're Neeta you are able to connect to and that's going to be that JSON file that we just created.

59
00:04:57,650 --> 00:05:02,430
And that's on the same directory, so it's we can just simply connect to that Jason file.

60
00:05:02,960 --> 00:05:09,650
And so when we click the button, we're going to encode our fetch and fetch to a Web URL.

61
00:05:09,660 --> 00:05:12,790
So we need the one parameter and that's passing in the early.

62
00:05:12,980 --> 00:05:15,230
And this is the resource that we want to fetch.

63
00:05:15,260 --> 00:05:20,770
So whether it's a file locally or a Web file, they're both going to work the same way.

64
00:05:23,430 --> 00:05:31,800
And after that, once we make the Thach request, then we can select and use them and as fetches promised

65
00:05:31,800 --> 00:05:37,170
space then is allowed to be chained together so we can have multiple methods chained together.

66
00:05:37,440 --> 00:05:39,740
And that's just going to be the first request.

67
00:05:39,900 --> 00:05:43,710
Once that completes, then it's going to move on to the next method.

68
00:05:43,830 --> 00:05:46,470
And that's where we can chain together multiple thens.

69
00:05:48,330 --> 00:05:55,890
And this is all part of promises and JavaScript and the way promises work, is there a feature of asynchronous

70
00:05:55,890 --> 00:05:56,760
operations?

71
00:05:57,030 --> 00:06:01,310
So whenever one gets met, then it moves on to the other one.

72
00:06:01,320 --> 00:06:06,150
And the promises, once the connection is made to the server, it sends the information back.

73
00:06:06,330 --> 00:06:11,580
And once the promise resolves, it's going to move on to the next function that's chained together.

74
00:06:11,970 --> 00:06:16,470
So in this case, we're returning back a response back.

75
00:06:16,500 --> 00:06:19,040
So this is just going to be our response object.

76
00:06:19,500 --> 00:06:23,190
And with that response object, we can return it back.

77
00:06:23,310 --> 00:06:30,660
And then the last lesson we saw how we can return back text and we can also use the JSON method in order

78
00:06:30,660 --> 00:06:32,050
to return back, Jason.

79
00:06:32,340 --> 00:06:37,440
So you might also see it and see Fach being written like this with multiple promises.

80
00:06:38,100 --> 00:06:41,010
So it's depending on how you want to read it.

81
00:06:41,400 --> 00:06:46,980
And then once this promise is met, then it's going to move to the next chained promise.

82
00:06:47,220 --> 00:06:53,220
And this is going to be where we're returning back the data and that's going to be captured as a variable

83
00:06:53,220 --> 00:06:56,440
name called data, and then whatever we want to do to it.

84
00:06:56,580 --> 00:07:02,750
So we have the opportunity to run through the content and output the data.

85
00:07:03,720 --> 00:07:09,180
And usually this is going to be my starting point where when I do make the fetch request, I want to

86
00:07:09,180 --> 00:07:13,640
make sure that I have the opportunity to log the data into the console.

87
00:07:13,650 --> 00:07:14,850
So let's try that.

88
00:07:15,180 --> 00:07:22,920
And there's our data and this is coming from the local JSON file and it's JSON object.

89
00:07:22,920 --> 00:07:26,280
And then we can retrieve the data that's contained within that object.

90
00:07:28,560 --> 00:07:35,460
So, again, the first line says to fetch the resource located at whatever the URL is and then runs

91
00:07:35,460 --> 00:07:43,080
the function which the promise resolves, and that means that whenever the finished performing the specified

92
00:07:43,080 --> 00:07:46,180
operation, which could be at a future point.

93
00:07:46,200 --> 00:07:52,080
So once it makes that connection, whenever it finishes, then it moves on to the next promise.

94
00:07:53,920 --> 00:08:02,170
And effectively, the then passes in a chunk of code that will not run immediately, so this block of

95
00:08:02,170 --> 00:08:09,220
code will just gets passed into the promise and it waits its turn a waits in the line between the different

96
00:08:09,220 --> 00:08:11,440
promises to execute the code.

97
00:08:13,640 --> 00:08:21,320
And in order to handle errors, you can add in another promise afterwards so we can do a promise where

98
00:08:21,350 --> 00:08:27,020
we're catching and this will get invoked if there are any errors that are passed.

99
00:08:27,380 --> 00:08:34,020
So this could be whatever error message or something like that that we want to see what happened with

100
00:08:34,020 --> 00:08:34,880
the Thach.

101
00:08:34,880 --> 00:08:37,430
If the Fed's request didn't work out right.

102
00:08:37,670 --> 00:08:40,670
We're going to return back to error and we can take that error.

103
00:08:40,850 --> 00:08:44,240
And for now, what we'll do is we're just going to log it into the console.

104
00:08:46,000 --> 00:08:53,080
And we can just say Futch problem and then whatever the error message is going to be so concatenated

105
00:08:53,080 --> 00:08:57,610
together and error and it's going to return back JSON object.

106
00:08:57,670 --> 00:09:03,870
So error message and we can capture that within the console log if we do have any errors.

107
00:09:04,210 --> 00:09:10,690
So let's say, for instance, we are fetching two adjacent file that doesn't exist or JSON object,

108
00:09:10,960 --> 00:09:13,410
then this is where the promise kicks in.

109
00:09:15,150 --> 00:09:21,300
And we see the error messages being output there, so we get the fetch problem and unexpected token.

110
00:09:23,070 --> 00:09:30,990
At that position, because it's not able to find the location of the file and if we update it, you

111
00:09:30,990 --> 00:09:34,740
can see that that also updates that output there, that now we've got the call.

112
00:09:35,130 --> 00:09:40,320
So it is catching the error and it is making and updating the value.

113
00:09:42,610 --> 00:09:43,630
Within the console.

114
00:09:49,030 --> 00:09:58,150
And we can also get the whole air object, and usually it's a lot more clear if we just deal with the

115
00:09:58,150 --> 00:10:00,010
error message, if we customize that.

116
00:10:00,370 --> 00:10:03,910
So let's remove out the error in the code.

117
00:10:04,150 --> 00:10:09,370
And also notice that we're not doing the catch anymore, that we're just simply getting and returning

118
00:10:09,370 --> 00:10:10,620
back to the adjacent object.

119
00:10:11,200 --> 00:10:14,230
So let's make a connection to Web API.

120
00:10:14,590 --> 00:10:20,710
And GitHub has a number of open APIs, so it's relatively easy to make a connection to it.

121
00:10:21,010 --> 00:10:27,160
And the structure of the GitHub endpoint point is going to be the same as what we've got within our

122
00:10:27,160 --> 00:10:28,000
JSON file.

123
00:10:28,210 --> 00:10:36,700
So it's going to be fairly easy to select that Web URL and just swap it out and let's make a connection

124
00:10:36,700 --> 00:10:37,210
to that.

125
00:10:37,780 --> 00:10:40,780
And now we're returning back the Web API.

126
00:10:40,780 --> 00:10:44,200
And as you can see, there's a lot of data that gets returned back here.

127
00:10:44,470 --> 00:10:47,560
So let's output some of that content onto the page.

128
00:10:47,770 --> 00:10:56,950
So once we meet and we get the promise, let's create a function and this function output content to

129
00:10:56,950 --> 00:11:07,180
page and it's going to take in the data object and we're going to base this data object on what we're

130
00:11:07,270 --> 00:11:10,680
retrieving back here from the GitHub repository.

131
00:11:11,800 --> 00:11:14,890
So we've got the language object information.

132
00:11:14,890 --> 00:11:18,730
We've got the owner ID the name, so let's output that information.

133
00:11:19,510 --> 00:11:21,890
And now this is going to be contained within the data.

134
00:11:22,390 --> 00:11:26,860
You can also console log it out just to make sure that you did pick it up properly.

135
00:11:28,760 --> 00:11:35,330
And also, if you want to construct some HTML object to output, you can use the template literals.

136
00:11:35,540 --> 00:11:40,440
These are the tactics to the left of the one key on most keyboards.

137
00:11:40,940 --> 00:11:44,240
So taking data and name.

138
00:11:45,680 --> 00:11:52,670
So that will output the HTML and then we can take the output and update the inner turmoil of the output

139
00:11:52,670 --> 00:11:55,360
object and just assign that HTML to it.

140
00:12:00,010 --> 00:12:06,460
And of course, we need to run this function, so whenever the promise has been met and we do have data,

141
00:12:07,120 --> 00:12:09,690
we're running the function and are turning back the name.

142
00:12:09,940 --> 00:12:12,870
So the name is going to correspond with the name here.

143
00:12:13,420 --> 00:12:14,680
We can also get the ID.

144
00:12:14,800 --> 00:12:19,630
And also let's try to do one more where we're going to go into the owner object and return back the

145
00:12:19,630 --> 00:12:21,460
ID from the owner object.

146
00:12:21,940 --> 00:12:27,260
You can either use the dot notation or bracket notation so either one will work the same way.

147
00:12:27,640 --> 00:12:30,960
So this is optional up to you how you want to handle that.

148
00:12:31,180 --> 00:12:37,120
Sometimes the bracket notation is a little bit easier to read and of course the annotations more flexible.

149
00:12:37,120 --> 00:12:40,570
But either way, it's going to output that same content onto the page.

150
00:12:43,840 --> 00:12:47,920
We can have information, so I'm just going to add in a line break.

151
00:12:51,390 --> 00:12:57,060
And with the template literals, you can move to the next line and I'll actually I'll put it on the

152
00:12:57,060 --> 00:12:57,660
next line.

153
00:12:58,110 --> 00:13:01,950
So let's go back into here and see what we have.

154
00:13:02,130 --> 00:13:04,660
Can I put the ID value?

155
00:13:06,870 --> 00:13:10,440
And next up, let's select the owner object.

156
00:13:11,400 --> 00:13:13,200
So that is the owner.

157
00:13:15,240 --> 00:13:18,710
And as well, you can use single or double quotes within the bracket notation.

158
00:13:19,020 --> 00:13:22,320
So in order to retrieve back the ID within the owner.

159
00:13:25,750 --> 00:13:34,690
And let's just make sure that it is working, and if we want to have proper TML, let's put the line

160
00:13:34,690 --> 00:13:36,910
breaks there so it separates out the content.

161
00:13:37,210 --> 00:13:41,580
So it's returning back the appropriate and corresponding details.

162
00:13:42,190 --> 00:13:44,200
And then lastly, let's also get language.

163
00:13:44,350 --> 00:13:49,660
And I was just checking to make sure that it's going to be consistent with our local file so we can

164
00:13:49,660 --> 00:13:54,640
swap it to the local and then also we can swap it to the GitHub repository.

165
00:13:59,420 --> 00:14:00,290
So that's the.

166
00:14:04,050 --> 00:14:05,820
And there's language over there.

167
00:14:08,370 --> 00:14:13,080
And it doesn't have it, that's what it was during the undefined because it was looking for the more

168
00:14:13,080 --> 00:14:14,100
complex object.

169
00:14:14,340 --> 00:14:18,520
So there it's returning back the content and as well.

170
00:14:18,660 --> 00:14:24,430
Let's update the euro and we'll just use whatever the local you are.

171
00:14:25,140 --> 00:14:29,490
So that was the approach to Jason file.

172
00:14:29,610 --> 00:14:34,890
And it should also work as well as the structure.

173
00:14:34,890 --> 00:14:41,010
It's the most important thing about JSON object is being able to read the structure and then make use

174
00:14:41,010 --> 00:14:41,810
of the structures.

175
00:14:41,820 --> 00:14:48,030
You're able to associate the property names and get the corresponding value and return that information.

176
00:14:51,260 --> 00:14:54,840
Within the GitHub, there's also the repos.

177
00:14:55,250 --> 00:15:04,700
So this is a more complex request, and this one is going to return back an array of items and the rays

178
00:15:04,700 --> 00:15:10,790
are indicated with square brackets at the top, whereas this one is just returning back an object.

179
00:15:11,000 --> 00:15:13,280
This one is returning back injury first.

180
00:15:13,940 --> 00:15:16,280
So let's update the euro.

181
00:15:21,990 --> 00:15:33,480
And we'll just update the euro value, so returning back the array of repos and we'll make the Thach

182
00:15:33,480 --> 00:15:44,100
request and then this is going to be output array and will update this function to output the array

183
00:15:44,100 --> 00:15:44,780
of content.

184
00:15:45,030 --> 00:15:49,110
So output array that we can use that as data.

185
00:15:52,010 --> 00:15:57,800
So let's see what we get output there and we're capturing 10 different reports, so ideally what we

186
00:15:57,800 --> 00:16:07,370
want to do is loop through each one of those and we can pull back the information the same way that

187
00:16:07,370 --> 00:16:15,500
we were pulling the information back from this object so we can just output it to the page instead of

188
00:16:15,500 --> 00:16:16,180
updating.

189
00:16:16,400 --> 00:16:18,460
We're just going to concatenate the HTML.

190
00:16:19,100 --> 00:16:23,720
So let's loop through the data and go for each.

191
00:16:24,290 --> 00:16:29,330
So looping through each one of the pieces of data, we're turning it back as an element.

192
00:16:29,720 --> 00:16:36,110
And then that element is going to be the data object that we're going to output and load to the page.

193
00:16:39,880 --> 00:16:41,290
So let's see how that looks.

194
00:16:41,530 --> 00:16:49,480
So go back in and refresh it, so there's all of our data objects and in order to separate it as we're

195
00:16:49,480 --> 00:16:55,180
looping through and concatenating to the page, I'm going to add in horizontal rule.

196
00:16:58,900 --> 00:17:03,160
So that way we can have a separation of each one of the repositories.

197
00:17:08,470 --> 00:17:15,520
And even though these are more complex, once you recognize that is an array of the same items and we've

198
00:17:15,520 --> 00:17:21,130
already worked through working through the single item single repository, we can loop through multiple

199
00:17:21,130 --> 00:17:24,760
repositories and return back the content onto the page.

200
00:17:26,110 --> 00:17:35,350
So let's do one more where we can do a search of the repositories and there's more information about

201
00:17:35,350 --> 00:17:40,340
the GitHub repo at Docs dot github dot com.

202
00:17:41,050 --> 00:17:45,010
That gives you more information about how you can make the requests.

203
00:17:47,220 --> 00:17:56,490
And select the various reports, so selecting and using the you are a component to encode it because

204
00:17:56,490 --> 00:17:57,950
this is going to be a request.

205
00:17:57,960 --> 00:17:59,450
So it's just like a Web request.

206
00:17:59,670 --> 00:18:07,230
You want to do the you are a component to encode it and that will do the quarter to deconstruct and

207
00:18:07,230 --> 00:18:08,520
construct the query strings.

208
00:18:11,880 --> 00:18:14,620
And this gives you the limitations, errors.

209
00:18:15,270 --> 00:18:18,390
This is an example of how you can do the search code.

210
00:18:20,630 --> 00:18:28,280
Into the query, so it's doing a search for the code into the query, so let's add that in and update

211
00:18:28,280 --> 00:18:29,840
that to the Repos.

212
00:18:32,160 --> 00:18:39,410
So I'm just copying through the query string and that's actually going to be to search the repositories.

213
00:18:39,630 --> 00:18:46,490
So the number of options of different paths that you can search and update this to search the repositories,

214
00:18:46,700 --> 00:18:49,340
notice that it does have a question mark in a query.

215
00:18:49,520 --> 00:18:52,520
So it is expecting a returned result there.

216
00:18:52,860 --> 00:18:59,180
And we want to make the Thach request and output the contents that we've got here within the repositories.

217
00:18:59,420 --> 00:19:05,360
And the structure for the returned results is going to be the same where we've got the ID, we've got

218
00:19:05,360 --> 00:19:09,350
a name owner with its ID and then as well it's got the language.

219
00:19:09,530 --> 00:19:11,720
And of course there's a ton of information here.

220
00:19:11,720 --> 00:19:14,860
So you can even add in the euro as well.

221
00:19:14,880 --> 00:19:19,890
So the HTML, URL, wherever we've got the repository that we're doing the search for.

222
00:19:20,300 --> 00:19:25,730
So however you want and it is this good practice to take some of this content and put it on the page.

223
00:19:26,060 --> 00:19:31,910
So let's go back in and we're going to construct the query is the search query, so do a refresh.

224
00:19:32,180 --> 00:19:36,350
And what happened here is that we're not able to process it.

225
00:19:36,350 --> 00:19:43,970
So it's validation error and it's being whatever the error messages that's being returned back from

226
00:19:43,970 --> 00:19:45,620
the endpoint.

227
00:19:46,040 --> 00:19:52,460
So the data fetch is not a function because we don't have an object to loop through because we didn't

228
00:19:52,460 --> 00:19:53,660
get any content back.

229
00:19:54,020 --> 00:19:59,020
So let's go ahead and we'll add one more item into the page.

230
00:19:59,060 --> 00:20:02,870
So do an input and set the type to text.

231
00:20:03,320 --> 00:20:06,830
And this will be whatever the search term is that we want to do.

232
00:20:07,610 --> 00:20:09,140
And we only got the one input.

233
00:20:09,320 --> 00:20:11,090
We can give it a class.

234
00:20:14,130 --> 00:20:21,630
And call it a search term so that we can select it and going back into the JavaScript.

235
00:20:25,660 --> 00:20:33,070
Well, set up an object called search term document and query selector, select the element with a class

236
00:20:33,070 --> 00:20:35,600
of search term.

237
00:20:35,620 --> 00:20:40,900
So select that object and then we can get whatever the value is, whatever the button gets clicked,

238
00:20:41,110 --> 00:20:43,110
then this is going to be the search term.

239
00:20:43,120 --> 00:20:46,720
So we need to take the user out and we need to construct the search term.

240
00:20:46,870 --> 00:20:49,800
And using that and code, you are a component.

241
00:20:50,050 --> 00:20:55,330
And what this will do is if there's spaces, then it will update an account for the spaces and I'll

242
00:20:55,330 --> 00:20:58,530
output the query string before and after.

243
00:20:58,930 --> 00:21:06,090
So setting up variable value and we can also just call it the query string or whatever.

244
00:21:07,060 --> 00:21:14,560
And within here, let's assign the value of whatever we've got for you, Earl, and then concatenate

245
00:21:14,590 --> 00:21:18,400
to that the question mark.

246
00:21:19,210 --> 00:21:23,290
And what we're going to do is we're going to do a search query.

247
00:21:23,290 --> 00:21:31,180
So just as we have within the Web browser, so we've got Q equals and then this is where we're going

248
00:21:31,180 --> 00:21:42,700
to use the component and taking the whatever the current value is of the search term value.

249
00:21:42,710 --> 00:21:46,390
So that's going to get the input value of that input field.

250
00:21:47,410 --> 00:21:50,470
And that way we'll add it in.

251
00:21:55,130 --> 00:22:00,860
And that will construct our query string, let's log that out into the console.

252
00:22:05,350 --> 00:22:12,540
So log that value and then this is also going to be the new euro that we're sending the request.

253
00:22:12,910 --> 00:22:14,030
So let's try that.

254
00:22:14,050 --> 00:22:17,740
So now we've got a click me query string.

255
00:22:17,950 --> 00:22:19,150
It's making the request.

256
00:22:19,330 --> 00:22:26,170
It provides us what the total that's being returned back and it's got it within an object called items.

257
00:22:26,470 --> 00:22:32,740
So let's make a quick adjustment where we've got the data that's coming back and this is it in an array

258
00:22:32,740 --> 00:22:33,520
of items.

259
00:22:33,820 --> 00:22:37,990
So we want to make sure that we're sending the array over that we want to loop through.

260
00:22:41,720 --> 00:22:48,710
And let's like this, actually, we're going to update this and we'll send it to another function so

261
00:22:48,710 --> 00:22:49,430
we don't have to.

262
00:22:52,720 --> 00:22:54,610
We'll just call it output Arae to.

263
00:22:57,260 --> 00:22:59,490
And we're not going to try to loop through it yet.

264
00:23:01,070 --> 00:23:04,220
I would put the content and this is what we've got.

265
00:23:04,520 --> 00:23:07,070
So we want to take a look at the items.

266
00:23:10,730 --> 00:23:14,880
So only items is what we want to look at, and there's a every.

267
00:23:14,930 --> 00:23:22,520
So at this point we're ready to loop through them and they should have the same structure as the output

268
00:23:22,700 --> 00:23:30,440
to content so we can loop through each one of the items and we'll just check to see if data items.

269
00:23:37,100 --> 00:23:43,490
Length is greater than zero, and if it is so, we know that we're good to loop through.

270
00:23:45,600 --> 00:23:57,510
And loop through the data items array and output that content to the page, so there's our list of items

271
00:23:57,720 --> 00:24:01,710
and it doesn't look like the language is contained within this object.

272
00:24:02,010 --> 00:24:04,710
So in some cases, there might be slight variations.

273
00:24:05,250 --> 00:24:09,120
So maybe we want to look at HTML you or something like that.

274
00:24:12,970 --> 00:24:17,660
And let's try that one more time, so make sure that we're able to put the content onto that getup.

275
00:24:18,640 --> 00:24:19,280
So there we go.

276
00:24:19,300 --> 00:24:22,090
So we've got all of the content loading.

277
00:24:22,360 --> 00:24:27,000
And also before we conclude, GitHub also has ZENN quote.

278
00:24:27,640 --> 00:24:28,930
So this is a really easy one.

279
00:24:28,930 --> 00:24:31,090
That is just a Web URL.

280
00:24:31,110 --> 00:24:33,340
It just returns back a simple Zend message.

281
00:24:33,730 --> 00:24:41,100
So I want to add that in whatever the page loads and update the JavaScript to the Zen message.

282
00:24:41,470 --> 00:24:52,270
So let's do that quickly before we conclude and we'll just create a window add event listener.

283
00:24:52,810 --> 00:24:54,700
So we're listening for Dom

284
00:24:57,130 --> 00:25:03,450
content loaded and so it's going to fire off the event whenever the DOM content loads.

285
00:25:03,730 --> 00:25:10,960
And for now I'll just type in ready and then we'll make a fetch request and we'll get the Zen quote

286
00:25:11,350 --> 00:25:12,280
once it's working.

287
00:25:12,280 --> 00:25:14,430
So let's update the H1.

288
00:25:15,130 --> 00:25:25,420
So using the documents, query selector, select the H1 element and then we're going to update the each

289
00:25:25,420 --> 00:25:33,850
one element with whatever the text content is that's being returned back from the Web API.

290
00:25:35,660 --> 00:25:38,030
So this will be the value that we're looking for.

291
00:25:38,210 --> 00:25:45,500
So we need to make Fach request and then update the content so Futch and the URL that we're fetching

292
00:25:45,500 --> 00:25:51,140
to and then once we return it back.

293
00:25:51,170 --> 00:25:57,980
So this is just going to be a response object and this is just going to be returned back as a response

294
00:25:58,490 --> 00:25:59,090
text.

295
00:26:02,530 --> 00:26:12,130
And China, together with DOT, and then the last promise is whenever we get the message back and then

296
00:26:12,130 --> 00:26:15,630
what do we want to do with the message, we want to put it to the page.

297
00:26:16,450 --> 00:26:22,720
So we'll take that value, take the value of message and put it to the page.

298
00:26:23,350 --> 00:26:30,790
So whenever the page loads that we're going to have a nice Zen message instead of the JavaScript, we

299
00:26:30,790 --> 00:26:33,130
can do our search within the console.

300
00:26:33,370 --> 00:26:35,950
If there are some values, it's going to return those back.

301
00:26:36,460 --> 00:26:46,090
And you can also update this to have a trough so it can hyperlink to wherever the location is.

302
00:26:54,840 --> 00:26:59,790
And then would the path name and then closer of.

303
00:27:04,120 --> 00:27:12,100
So that gives us a direct link to the repository, and that's all coming in dynamically.

304
00:27:16,260 --> 00:27:24,040
And if we do something like test, test, what's going to happen here is that we're doing the urine

305
00:27:24,120 --> 00:27:24,840
and coding.

306
00:27:29,500 --> 00:27:35,710
So let's double check and output the message, we're putting the message into the console.

307
00:27:38,400 --> 00:27:41,850
And let's go up and we see that this is the.

308
00:27:43,900 --> 00:27:49,930
You are a component and coated version of it, of the test test.

309
00:27:55,900 --> 00:28:00,700
And I do need to break out of that, so we run the JavaScript encoding.

310
00:28:04,370 --> 00:28:13,640
Of the value and just save that, so that was a quick debugging just to make sure that it is working.

311
00:28:14,480 --> 00:28:19,700
So if we look for test test, it's going to do the encoding of it.

312
00:28:19,700 --> 00:28:27,340
So it's in the instead of the space, it uses the percentage 20 in order to do the search.

313
00:28:27,830 --> 00:28:32,990
And then what's going to happen here is that every time we make a request, we're going to load a new

314
00:28:32,990 --> 00:28:36,140
set of values into onto the page.

315
00:28:38,470 --> 00:28:43,000
Hey, this lesson is going to be all about practice, so created JSON file that you can make a request

316
00:28:43,000 --> 00:28:48,370
to output the contents of that JSON file so you can make it fairly simple and straightforward.

317
00:28:48,380 --> 00:28:49,660
Have the ID, the name.

318
00:28:49,810 --> 00:28:57,730
The owner can be an object with one item within that object and that can be ID and then language return

319
00:28:57,730 --> 00:28:58,260
the content.

320
00:28:58,270 --> 00:29:04,900
So put it to the page, then make a fetch request to the GitHub repo with the same structure, return

321
00:29:04,900 --> 00:29:10,810
that content to the page, connect to the repos where you're going to get an array of items coming back

322
00:29:11,020 --> 00:29:14,940
and then loop through those, iterate through those and put those to the page.

323
00:29:15,250 --> 00:29:22,180
And then lastly, update your application to include an input field where you can make the user can

324
00:29:22,180 --> 00:29:27,670
come in and you can fill out the input field, they can click the button and that will make a request

325
00:29:27,880 --> 00:29:35,260
with the search query to the GitHub repo and get all of the information back from the API and then output

326
00:29:35,260 --> 00:29:36,730
those results to the page.