1
00:00:00,750 --> 00:00:05,070
This lesson is going to be the ultimate practice lesson where we're going to be connecting to some endpoints

2
00:00:05,220 --> 00:00:08,760
and then dynamically loading the data onto the page.

3
00:00:08,940 --> 00:00:11,610
Now, these endpoints are also going to have different data structures.

4
00:00:11,610 --> 00:00:13,490
You can see that here within the console.

5
00:00:13,650 --> 00:00:16,080
So they're not always going to be structured the same way.

6
00:00:16,260 --> 00:00:18,300
They're going to have different properties and values.

7
00:00:18,450 --> 00:00:25,170
So the objective is to part in order to be able to troubleshoot the various JSON endpoints and how to

8
00:00:25,170 --> 00:00:25,830
handle those.

9
00:00:25,950 --> 00:00:31,370
And then also lastly, of course, how to output the content on the page and make use of the content.

10
00:00:31,620 --> 00:00:34,890
So as you can see, whenever I click the button, it's changing the endpoints.

11
00:00:35,010 --> 00:00:40,380
And this is going to be the final result of this lesson's project where we've got some buttons connecting

12
00:00:40,380 --> 00:00:45,160
to endpoints and then dynamically adjusting and outputting the content on the page.

13
00:00:45,630 --> 00:00:51,840
Let's connect to some endpoints so we've got our indexed HTML file, so cleared out some of the values

14
00:00:51,840 --> 00:00:52,850
from the last lesson.

15
00:00:52,860 --> 00:00:59,790
So staling is clear now and we're still using the same four elements within the body and then linking

16
00:00:59,790 --> 00:01:01,320
it to a script file.

17
00:01:01,470 --> 00:01:03,630
And this is going to be up for James.

18
00:01:03,870 --> 00:01:09,570
And then within the script file, I've got the button connectors, the output area, the value.

19
00:01:09,690 --> 00:01:14,880
And let me get rid of this one, because we don't need to create the second input and have the value

20
00:01:14,880 --> 00:01:20,610
for the input of just test and then also the button click me and whatever the button gets clicked,

21
00:01:20,790 --> 00:01:22,920
then we're going to make our request here.

22
00:01:22,920 --> 00:01:26,220
So I'll output into the console already.

23
00:01:26,490 --> 00:01:31,300
And just to make sure that the button is working so everything looks like it's good and ready to go.

24
00:01:31,590 --> 00:01:33,570
So let's make our request.

25
00:01:33,810 --> 00:01:39,480
And in this case, we're going to be making a request to a few different and points and I'll just be

26
00:01:39,480 --> 00:01:40,470
listing at the end points.

27
00:01:40,680 --> 00:01:45,090
So the purpose really is just to get some practice in on various and points.

28
00:01:45,390 --> 00:01:50,910
So we've got the euro here and this is connecting two adjacent file also.

29
00:01:50,910 --> 00:01:58,260
Just as always, just output the data within your Web browser if you're making a get request.

30
00:01:58,500 --> 00:02:02,760
And that way you can see that this endpoint is open and that we're able to access it.

31
00:02:04,860 --> 00:02:10,830
And you can also create local versions of these JSON files, so if you do if you are having problems

32
00:02:10,830 --> 00:02:15,180
connecting to the endpoints, you can make the local versions of the JSON file.

33
00:02:20,060 --> 00:02:26,630
And just toggling the word wrap so we can see the full Web you URL, so let's make our Futch request

34
00:02:26,840 --> 00:02:28,460
to that you URL.

35
00:02:30,530 --> 00:02:32,120
And I'll do that within a function.

36
00:02:35,250 --> 00:02:41,580
So it's going to make a futch request to whatever the you are ellis' that we're sending in there and

37
00:02:41,580 --> 00:02:47,010
I'll just call this you URL's and then eventually we can turn this into an array if we want to, making

38
00:02:47,010 --> 00:02:48,210
the Thach request.

39
00:02:48,210 --> 00:02:51,560
So, Futch, to whatever the you are, Ellis.

40
00:02:52,740 --> 00:02:59,730
And then once the request is made, we get the response back and take the response as Jason.

41
00:03:01,670 --> 00:03:06,950
And that's assuming that it is within adjacent formats, so as we saw last time, they might not all

42
00:03:06,950 --> 00:03:07,830
be Jason.

43
00:03:09,560 --> 00:03:15,470
So we have to be mindful of the fact that maybe returning it back as Jason, we might want to default

44
00:03:15,470 --> 00:03:16,610
it as text.

45
00:03:16,820 --> 00:03:22,550
And then when we see the data coming back, then we can just ensure that it is within a JSON format

46
00:03:22,940 --> 00:03:30,170
and then also lets out in a catch for any of the errors as they're going to be trying at various Web

47
00:03:30,620 --> 00:03:31,100
URLs.

48
00:03:31,340 --> 00:03:36,470
So some might have some issues or errors and then we can debug the errors.

49
00:03:36,950 --> 00:03:42,020
So make the request and copy it.

50
00:03:42,140 --> 00:03:46,760
When the button gets clicked, then we're going to loop through the OR else.

51
00:03:46,820 --> 00:03:48,200
Right now we just have the one URL.

52
00:03:50,340 --> 00:03:54,800
And click it so ready and we're turning the content back.

53
00:03:56,550 --> 00:03:57,180
So let's.

54
00:03:59,720 --> 00:04:08,660
Created as a JavaScript object, so using the adjacent pass, that can turn the data.

55
00:04:11,270 --> 00:04:14,120
Into Jason, our JavaScript object.

56
00:04:17,680 --> 00:04:19,280
And let's see what that looks like.

57
00:04:19,870 --> 00:04:26,690
So the data is going to stay the same, but we're just putting it so that looked like that worked.

58
00:04:26,710 --> 00:04:30,250
We've got our array that we can loop through such the box array.

59
00:04:33,140 --> 00:04:35,660
So let's update this parameter.

60
00:04:38,000 --> 00:04:40,340
And will create an object out of that.

61
00:04:44,070 --> 00:04:45,570
And within the object.

62
00:04:48,890 --> 00:04:58,100
I'll have one value for property of you, Earl, and if you want a proper structure as JSON, you do

63
00:04:58,100 --> 00:04:59,210
need to use the double quotes.

64
00:04:59,210 --> 00:05:02,120
But because this is in JavaScript, I am using single quotes.

65
00:05:06,240 --> 00:05:07,980
And for the.

66
00:05:09,240 --> 00:05:09,780
Ouray.

67
00:05:11,550 --> 00:05:14,130
The rain is going to be located at.

68
00:05:15,670 --> 00:05:16,200
Books.

69
00:05:19,750 --> 00:05:21,400
So that's going to be the path to the.

70
00:05:25,550 --> 00:05:28,730
So select the first you, Earl.

71
00:05:35,880 --> 00:05:43,320
And we'll just create temporary of you URL's zero one, and we're not going to send over the request

72
00:05:43,320 --> 00:05:48,030
yet until we can make sure that our local data structure properly.

73
00:05:50,720 --> 00:05:55,730
So it's in the temp and we've got the you are all there.

74
00:06:02,010 --> 00:06:06,930
So let's send this data over to the Miralles.

75
00:06:10,500 --> 00:06:16,620
And this is going to be returning back to object, so out of the object, we need to create a euro,

76
00:06:17,220 --> 00:06:22,350
so it's going to be located within the might object euro property.

77
00:06:24,080 --> 00:06:27,100
So make the Futch request to the my object you are.

78
00:06:32,650 --> 00:06:38,110
And now we'll console, like the value of the.

79
00:06:39,620 --> 00:06:46,280
Jason, and using the bracket notation and this is where the bracket notation is sometimes better because

80
00:06:46,280 --> 00:06:54,200
it's provides more flexibility, so I can take them my object and I can use the array string value to

81
00:06:54,200 --> 00:06:55,400
see what we like out here.

82
00:07:00,560 --> 00:07:04,800
So within the array string, that's where we're outputting that.

83
00:07:04,820 --> 00:07:13,910
And let me comment about some of this excess, so that gives us the array and allows us to locate the

84
00:07:13,910 --> 00:07:14,330
array.

85
00:07:14,480 --> 00:07:18,020
And we can dynamically track all of this within a.

86
00:07:25,150 --> 00:07:31,900
An array and have that locally, so allowing the users to be able to loop through the various Web URLs.

87
00:07:35,930 --> 00:07:38,660
And I'm also going to add one more value there.

88
00:07:45,780 --> 00:07:47,580
And I'll just call it Booklist.

89
00:07:49,600 --> 00:07:57,160
And we are going to be using that as we're going to be constructing the end points, using this object

90
00:07:57,340 --> 00:08:01,000
and then sending it over, adding, though, that listeners to those end points.

91
00:08:04,370 --> 00:08:06,120
So let's create another one.

92
00:08:06,260 --> 00:08:11,390
Same structure and structure is really important when it comes to the JavaScript objects.

93
00:08:12,110 --> 00:08:14,720
So let's select another endpoint.

94
00:08:17,240 --> 00:08:21,020
And in this case, we'll use the end point for people.

95
00:08:23,920 --> 00:08:29,530
And this can be something like a friends list or something like that, and we don't know what it is

96
00:08:29,530 --> 00:08:35,890
yet, so we want to have an opportunity to still output the content from the Thach request.

97
00:08:39,170 --> 00:08:43,670
So let's update the index value here to you, URL's one.

98
00:08:46,500 --> 00:08:52,110
And then we'll also update you earlier that we're sending to you, so let's see what happens.

99
00:08:52,470 --> 00:08:56,720
So we're going to fail because we're making a connection.

100
00:08:57,240 --> 00:09:01,290
We're still returning it back as JavaScript object here.

101
00:09:01,800 --> 00:09:05,100
But we do have a problem here where we're trying to get the array out.

102
00:09:06,340 --> 00:09:12,270
So let's fix this and then so we can do our debugging here and then make that dynamic.

103
00:09:16,950 --> 00:09:24,840
And let's take the end points and try it within the Web browser first, so this is what we're returning

104
00:09:24,840 --> 00:09:28,260
back and the rate actually should be within data.

105
00:09:29,950 --> 00:09:32,560
So we should be able to return that information back.

106
00:09:34,540 --> 00:09:38,710
So let's see what's going wrong here or do some troubleshooting and debugging.

107
00:09:42,410 --> 00:09:48,050
And comment about some of this excess, so this is what we're getting return back.

108
00:09:50,770 --> 00:09:59,560
And it does look like it's it's a string value, so let's output the JSON object.

109
00:10:02,220 --> 00:10:07,200
So it's having a problem parsing this as Jason, so if you do encounter this.

110
00:10:11,670 --> 00:10:17,310
Double check to make sure that you've got on data that's valid, Jason, data, so it is valid.

111
00:10:17,310 --> 00:10:18,140
Jason Data.

112
00:10:21,560 --> 00:10:28,610
And let's just create a file of it and call it Jason for Jason.

113
00:10:31,760 --> 00:10:35,030
So that will give us an opportunity to adjust that if needed.

114
00:10:35,990 --> 00:10:40,510
Jason, for Jason and that's we're going to make the fach requestor.

115
00:10:41,330 --> 00:10:46,160
So this one looks like it's a little bit difficult to troubleshoot as it doesn't make any sense that

116
00:10:46,160 --> 00:10:47,450
we're not able to output it.

117
00:10:47,450 --> 00:10:49,430
But when we create a Jason file, we are.

118
00:10:49,730 --> 00:10:53,740
So that secret really is within the source code of the file.

119
00:10:53,930 --> 00:10:57,070
So we go over to the one people died, Jason.

120
00:10:57,410 --> 00:11:03,350
We look into the source and immediately we notice that this is going to be HTML content.

121
00:11:03,350 --> 00:11:06,680
So it's not going to be presented as JSON content.

122
00:11:06,950 --> 00:11:08,480
And that's a problem.

123
00:11:08,480 --> 00:11:11,190
Even though the extension is JSON, there is an issue here.

124
00:11:11,420 --> 00:11:19,430
So looking at the Web page and open up the source, the inspect elements, and then from here we can

125
00:11:19,430 --> 00:11:27,440
see what the problem is, that it's got a lot of these character spaces for providing the structure.

126
00:11:27,710 --> 00:11:31,460
And that's what we're not able to see that visibly.

127
00:11:31,730 --> 00:11:33,500
But that's within the courts.

128
00:11:33,510 --> 00:11:35,800
It's got all of these spaces here.

129
00:11:35,840 --> 00:11:43,730
So we need to strip out these extra spaces from the string value and before we try to convert into the

130
00:11:43,730 --> 00:11:52,190
JSON object and with a typical string, you can also notice as well that if this was a typical string,

131
00:11:52,370 --> 00:11:55,880
there wouldn't be any of these spaces that we can convert it to JSON.

132
00:11:56,120 --> 00:11:59,420
So this is already structured with the spaces.

133
00:11:59,600 --> 00:12:02,120
And that's why when we copy it, it works.

134
00:12:02,330 --> 00:12:04,970
When we paste it into the lint, it works.

135
00:12:05,150 --> 00:12:11,420
But when we try to connect to the adjacent file online, it doesn't work because of those exact spaces.

136
00:12:11,690 --> 00:12:18,020
So let's go back in and we're going to load that page content one more time and we want to strip out

137
00:12:18,020 --> 00:12:21,370
the extra spaces from the string data.

138
00:12:21,530 --> 00:12:23,780
So we're turning it back as text.

139
00:12:25,400 --> 00:12:31,790
And outputting the text content, so that's our text content, so we have to remove it all of these

140
00:12:31,790 --> 00:12:35,390
extra spaces that are currently within the text content.

141
00:12:38,060 --> 00:12:40,910
In order to structure it as Jason.

142
00:12:44,320 --> 00:12:47,850
So let's create a temporary holder for the data.

143
00:12:52,200 --> 00:12:56,340
And then take that data and use replace.

144
00:12:59,430 --> 00:13:05,730
So return to replace the spaces, which is blanks, so remove out all of that.

145
00:13:07,620 --> 00:13:11,010
And let's see what we now we get return back in the value.

146
00:13:21,010 --> 00:13:30,430
And even better than using the character for these hidden spaces, let's remove it out using a regular

147
00:13:30,430 --> 00:13:39,820
expression so this will strip out all of the excess spaces, using the regular expression, and allow

148
00:13:39,820 --> 00:13:48,250
us to clean the structure of the JSON file because we hear we don't see all of this extra data and when

149
00:13:48,250 --> 00:13:50,800
we validated it restructures that properly.

150
00:13:52,360 --> 00:13:55,930
So now we've removed out the excess white space.

151
00:13:59,460 --> 00:14:00,240
From the data.

152
00:14:05,870 --> 00:14:13,400
And now let's pass the value over and see what we get as Jason.

153
00:14:16,620 --> 00:14:19,980
So now it works, we're able to use the JSON data.

154
00:14:40,080 --> 00:14:45,810
And from here, able to loop through and iterate through the data, so we had to do a small cleaning

155
00:14:45,810 --> 00:14:49,300
of the content before we're able to access and use the data.

156
00:14:49,560 --> 00:14:55,920
So this actually isn't a good example because this structure isn't going to fit properly with what we're

157
00:14:55,920 --> 00:14:56,610
trying to do.

158
00:14:56,820 --> 00:15:02,530
And this is just an example of the different end points and some of the problems that you might encounter.

159
00:15:02,760 --> 00:15:08,220
So if you do encounter this type of problem, look at the source code and check to see what could be

160
00:15:08,220 --> 00:15:11,380
causing and what could be creating the proper JSON structure.

161
00:15:11,700 --> 00:15:13,530
So let's try another endpoint.

162
00:15:16,250 --> 00:15:23,600
And at this end, point has the same data, but we notice that we don't have the line space for formats

163
00:15:23,600 --> 00:15:23,870
there.

164
00:15:24,170 --> 00:15:26,000
So let's update this you URL.

165
00:15:28,380 --> 00:15:31,380
And we'll try it going directly to the data content.

166
00:15:33,010 --> 00:15:39,430
And now it works and this is going to look the same way as what we've got within our JSON file and we

167
00:15:39,430 --> 00:15:42,670
don't have any of the spaces, so we don't have to worry about removing them.

168
00:15:42,880 --> 00:15:47,710
And the reason that we're not going to use that particular endpoint is that if we have to remove all

169
00:15:47,710 --> 00:15:53,200
of the spaces, we don't want to be removing our spaces in case some of the content has spaces.

170
00:15:53,470 --> 00:15:59,200
Now, there's more complex, regular expressions that you could remove out that have just spaces outside

171
00:15:59,200 --> 00:16:00,220
of the courts as well.

172
00:16:00,790 --> 00:16:04,360
So you could look to some of those more complex, regular expressions.

173
00:16:04,570 --> 00:16:10,440
But I did want to focus on troubleshooting and getting data from the endpoints within this course.

174
00:16:10,660 --> 00:16:13,690
So we're not going to get too far into the regular expressions.

175
00:16:13,810 --> 00:16:19,180
But there is a way and that's how you can troubleshoot and just make sure that your content, even though

176
00:16:19,180 --> 00:16:24,460
it looks well within the Web, you all just take a second look and look at the source code and make

177
00:16:24,460 --> 00:16:26,200
sure that the source code is clean.

178
00:16:26,350 --> 00:16:32,140
And this way you can take the content and you can directly parse it out as JSON.

179
00:16:32,770 --> 00:16:38,230
So if you do encounter any of those errors that we saw, that just means that the Jason that we're trying

180
00:16:38,230 --> 00:16:41,110
to pass is not properly structured JSON.

181
00:16:41,380 --> 00:16:44,740
So our array for this case is going to be the people.

182
00:16:48,510 --> 00:16:55,650
And now we can make a more dynamic way to loop through the data, because at this point we know that

183
00:16:55,830 --> 00:17:01,860
we've got people object and we can loop through the people array.

184
00:17:02,460 --> 00:17:04,620
So let's see what we've got here.

185
00:17:09,250 --> 00:17:19,120
And we can output the people array here, so this gives us an opportunity where we can change the index

186
00:17:19,120 --> 00:17:25,780
values and we can update and output the array objects dynamically.

187
00:17:28,690 --> 00:17:35,710
So let's add in one more end point that we can practice and then we'll dynamically output and generate

188
00:17:35,710 --> 00:17:36,880
all of these endpoints.

189
00:17:37,240 --> 00:17:43,320
So this is just going to be a cryptocurrency endpoints points and this is going to be are you, Earl?

190
00:17:43,810 --> 00:17:46,110
So I want to make sure I get the structure proper.

191
00:17:46,120 --> 00:17:53,680
So I'm going to copy and paste the URL and then I'll copy it into the New York URL for the list.

192
00:17:55,820 --> 00:17:56,690
And.

193
00:18:02,430 --> 00:18:10,530
And it looks like our initial array is going to be data, so we'll see what we return back here and

194
00:18:10,530 --> 00:18:19,620
let's update the euro and also update it within the button event listener and click the button.

195
00:18:20,010 --> 00:18:27,180
And it does look like we're able to get the content there for the different IDs.

196
00:18:27,180 --> 00:18:28,230
So the structures.

197
00:18:30,040 --> 00:18:37,270
Done properly, and it is within the data array, so status and this is the one that we want to loop

198
00:18:37,270 --> 00:18:37,450
through.

199
00:18:37,570 --> 00:18:41,820
We want to loop through the data array and output some of those values that are within the data array.

200
00:18:44,310 --> 00:18:52,350
So now that we've got the ability to dynamically select by index value and select the object array,

201
00:18:52,620 --> 00:18:57,150
we can pass through there and loop through there and output it onto the page.

202
00:19:01,320 --> 00:19:08,220
So let's add that option and and this could be a function or give it a name of maker.

203
00:19:10,920 --> 00:19:14,350
And it's going to take in an object value for the array.

204
00:19:14,970 --> 00:19:17,100
So this is just simply going to be Pastan.

205
00:19:19,980 --> 00:19:26,490
And then will console log the array and we'll do the array length just to make sure that we do have

206
00:19:26,490 --> 00:19:26,910
an array.

207
00:19:28,800 --> 00:19:36,360
And for each one to look through each one of the items in the array and put them in the page, so for

208
00:19:36,360 --> 00:19:40,640
someone want to do is I put them into the console and then we'll put them onto the page.

209
00:19:42,030 --> 00:19:45,210
So that gives us a listing of the items that we have.

210
00:19:45,210 --> 00:19:49,370
There are going to also commentates some of these console messages.

211
00:19:50,100 --> 00:19:52,110
So to avoid any of the confusion.

212
00:19:55,360 --> 00:20:01,560
So that's going to focus on the array, so there we've got our length and we've got the array data,

213
00:20:02,110 --> 00:20:07,420
so we want to ideally we want to just output and loop through all of the properties that we've got within

214
00:20:07,420 --> 00:20:07,990
the object.

215
00:20:09,830 --> 00:20:15,020
Now that we're returning back each item within the array and this is all dynamics, it doesn't matter

216
00:20:15,200 --> 00:20:19,970
which end point we're connecting to the paths and the data is going to be all different, but we're

217
00:20:19,970 --> 00:20:21,320
always looping through an array.

218
00:20:21,330 --> 00:20:26,450
So we want to make it flexible enough that we can take this object and list out all of the property

219
00:20:26,450 --> 00:20:32,330
names that we have here so we can do that with another for loop that's contained within the for each

220
00:20:32,330 --> 00:20:32,590
loop.

221
00:20:32,810 --> 00:20:36,620
And this one is going to just pull out the object contents.

222
00:20:37,490 --> 00:20:39,470
So the object contents.

223
00:20:41,940 --> 00:20:44,460
And we'll pull it out as an object of.

224
00:20:46,000 --> 00:20:55,660
And we'll check for the entries that are within the object and console log the contents that we have

225
00:20:55,660 --> 00:21:01,480
of the object, so let me comment that out and click.

226
00:21:03,140 --> 00:21:14,150
And because this is an object, let's select the elements entries and using the object or object entries

227
00:21:14,690 --> 00:21:23,440
so that we get returned back, so that gives us an array of each one of the property key and then the

228
00:21:23,450 --> 00:21:25,120
value that's associated with the key.

229
00:21:25,490 --> 00:21:28,210
And you can also separate this out as well.

230
00:21:31,120 --> 00:21:32,200
And call it entries.

231
00:21:34,640 --> 00:21:39,770
And depending on how you want to present the structure of your code so you can just do it like that

232
00:21:39,770 --> 00:21:40,850
way as well, entries.

233
00:21:41,330 --> 00:21:46,420
And if you want, you can also console log out what we've got for entries.

234
00:21:47,540 --> 00:21:50,120
So when we do make that request.

235
00:21:52,480 --> 00:22:00,820
We get that initial array of all of the items, so that means that we can then loop through does this

236
00:22:00,820 --> 00:22:06,060
object and output the contents that are contained within the object.

237
00:22:06,460 --> 00:22:09,670
And we don't actually have to loop through because the structure is always going to be the same.

238
00:22:10,090 --> 00:22:11,050
So these are.

239
00:22:11,650 --> 00:22:16,780
So the first item in the array is going to be the property name and then the second one is going to

240
00:22:16,780 --> 00:22:18,420
be the value that's associated with it.

241
00:22:20,720 --> 00:22:22,010
So let's take Output's.

242
00:22:25,410 --> 00:22:28,500
And just clear out the current in our HTML.

243
00:22:31,510 --> 00:22:38,020
And select the inner HTML and using the tactics for the template literals.

244
00:22:39,040 --> 00:22:46,420
I'm selecting the object, which is an array and selecting the first item, and then the second item

245
00:22:46,420 --> 00:22:47,360
is going to be the value.

246
00:22:47,380 --> 00:22:51,870
So that's going to be the key and then that's going to be the value that's associated with it.

247
00:22:52,270 --> 00:22:56,990
And then we'll just add to the HTML and create a line break between them.

248
00:22:57,910 --> 00:22:59,070
So let's see what we've got now.

249
00:22:59,080 --> 00:23:05,180
So it looks like we're able to output the content and we need to break between each one of those.

250
00:23:05,740 --> 00:23:10,740
So also, let's create a diff to create some structure.

251
00:23:11,470 --> 00:23:22,940
So using the document creates elements, create the div for the page and then output append, append

252
00:23:22,940 --> 00:23:29,950
the newly created div to the page and then within the div we're going to update the entire HTML.

253
00:23:30,940 --> 00:23:32,740
So that set the inner HTML.

254
00:23:38,150 --> 00:23:45,380
And just do a property's count or something like that could take entries and get the length value of

255
00:23:45,380 --> 00:23:45,810
entries.

256
00:23:46,040 --> 00:23:48,010
You can also use the back text as well.

257
00:23:48,860 --> 00:23:55,850
And actually, this isn't going to be output's going to be the diff and we're going to be updating the

258
00:23:55,940 --> 00:23:58,430
div values that way.

259
00:24:00,600 --> 00:24:03,600
So Properties is eight and.

260
00:24:06,270 --> 00:24:18,150
See what we've got, so it's adding that new line and let's also separate out and add a class size and

261
00:24:18,150 --> 00:24:25,530
class list, add a class to the diff and go to index.

262
00:24:29,130 --> 00:24:30,690
And let's set up some parting.

263
00:24:33,420 --> 00:24:34,620
And also border.

264
00:24:37,940 --> 00:24:43,600
And so with so is 80, whatever you can set, whatever, what makes sense for you?

265
00:24:46,470 --> 00:24:55,380
And then for margin as well, and then auto for right and left, so that centers, so this one is actually

266
00:24:55,740 --> 00:24:57,960
still has an object within that object.

267
00:24:58,260 --> 00:25:00,570
So you can also try to detect that.

268
00:25:01,140 --> 00:25:08,660
But the purposes of this, we just want to demonstrate that we should be able to switch the index values

269
00:25:09,510 --> 00:25:14,420
and that should return back and output the contents of the various points.

270
00:25:15,660 --> 00:25:22,040
So it looks like everything is working properly and we can dynamically output the contents of the endpoints.

271
00:25:22,650 --> 00:25:32,190
So let's do one final thing where we're going to loop through all of the Urals on the page and then

272
00:25:32,190 --> 00:25:33,420
create buttons for those.

273
00:25:34,140 --> 00:25:36,360
So you URLs for each.

274
00:25:39,100 --> 00:25:44,670
And it's going to be for each one of the elements, so let's update them and add them to the page.

275
00:25:45,430 --> 00:25:47,080
So creating a button.

276
00:25:49,990 --> 00:25:58,180
And I'll call it button one, using the document, create elements and creating the element is going

277
00:25:58,180 --> 00:26:02,170
to be a button and then clicking these buttons.

278
00:26:02,320 --> 00:26:11,950
It's going to launch into the you are all there and I'll use the will select each one.

279
00:26:13,530 --> 00:26:16,230
And we'll populate the content in their.

280
00:26:18,430 --> 00:26:22,100
You can also create another element to output content, too.

281
00:26:23,020 --> 00:26:32,110
So just to save some time, I'll select the each one and each one, append each one of these buttons

282
00:26:33,430 --> 00:26:34,090
to the page.

283
00:26:34,930 --> 00:26:36,130
So there's our buttons.

284
00:26:36,280 --> 00:26:38,820
We need to have some content on the button.

285
00:26:40,620 --> 00:26:41,890
So it's in the console.

286
00:26:42,160 --> 00:26:43,780
I'm going to output the contents.

287
00:26:43,990 --> 00:26:46,600
And thus, remember, this is coming from are you URLs?

288
00:26:47,140 --> 00:26:49,390
So we're updating and outputting the Urals.

289
00:26:49,690 --> 00:26:52,630
So each one of them has by default, it has a title.

290
00:26:53,110 --> 00:26:56,170
So we can use that as the content of the button.

291
00:26:59,490 --> 00:27:06,990
So take the button one text content, and we'll equal that to the Element title.

292
00:27:09,410 --> 00:27:14,000
So there's our buttons and let's make the buttons clickable.

293
00:27:16,140 --> 00:27:23,100
And also clear out the inner turmoil of each one so we don't have that Jason value there.

294
00:27:25,500 --> 00:27:34,350
And that we can do as soon as we select each one, so that way we just have the buttons up here, we've

295
00:27:34,350 --> 00:27:38,960
added the title and now we want to make the button active.

296
00:27:38,970 --> 00:27:40,650
So an event listener to the button.

297
00:27:43,440 --> 00:27:52,500
And whenever the button gets clicked, then we want to launch and launch to the mike, you are sending

298
00:27:52,500 --> 00:27:59,310
over the object information and we're going to also have the you are all here within the element object.

299
00:27:59,910 --> 00:28:01,920
So launch the euro.

300
00:28:04,840 --> 00:28:07,630
And actually, this just requires the full element to object.

301
00:28:10,660 --> 00:28:12,040
So let's see what happens.

302
00:28:12,070 --> 00:28:20,410
We click the buttons and we can dynamically load to the different end points and I'll update the connection

303
00:28:20,410 --> 00:28:23,070
before we send it over to the maker.

304
00:28:23,980 --> 00:28:29,020
And from here, we can just use the euro that we connected to.

305
00:28:30,010 --> 00:28:33,790
So that will load the endpoints there.

306
00:28:34,900 --> 00:28:37,600
And then the data from the end points below.

307
00:28:38,620 --> 00:28:42,010
Now, let's do one quick more update to the button.

308
00:28:44,300 --> 00:28:52,040
So to make the buttons a little bit more like buttons, a bigger updating the font size.

309
00:28:53,670 --> 00:29:00,090
And at some margin between the buttons, the five picks, and I'll add to each one of those buttons

310
00:29:00,090 --> 00:29:05,070
that we're creating and as we're looping through the buttons.

311
00:29:07,810 --> 00:29:14,270
Had a class of button and that turned out a little bit too big or bigger than I expected.

312
00:29:15,100 --> 00:29:17,020
So now we've got clickable buttons.

313
00:29:17,380 --> 00:29:21,730
I'm also going to update the border radius so slightly rounded.

314
00:29:24,060 --> 00:29:26,080
For the buttons and there we go.

315
00:29:26,520 --> 00:29:30,090
So now it's up to you to make updates as needed on the page.

316
00:29:31,190 --> 00:29:38,390
The objective of this lesson is to practice so there are some tasks that you should try it to dynamically

317
00:29:38,390 --> 00:29:44,090
load content from different JSON data and different Web pages and also troubleshooting debugging of

318
00:29:44,090 --> 00:29:50,530
the JSON data to make sure that your structure is proper and then outputting that content onto the page.

319
00:29:50,780 --> 00:29:57,350
Try it and check out the various data and error messages debugging within the console and then also

320
00:29:57,350 --> 00:30:05,030
using a LENTE option and then load the various data points and put the content on the page.