1
00:00:00,060 --> 00:00:01,690
Welcome Star Wars fans.

2
00:00:01,710 --> 00:00:06,600
Today, we're going to be looking at in this lesson connecting to a Star Wars API.

3
00:00:06,610 --> 00:00:13,860
So this API is rich in data and it's a really good practice API that you can return back details and

4
00:00:13,860 --> 00:00:20,580
then make requests, additional requests to get even more information from the Jaeson data that's being

5
00:00:20,580 --> 00:00:21,240
returned back.

6
00:00:21,600 --> 00:00:25,830
So in this lesson, we're going to be building out the first part of the application where we're going

7
00:00:25,830 --> 00:00:29,530
to connect to the API and we're going to build all of the categories.

8
00:00:29,730 --> 00:00:35,170
So these are building the different end points and listing out the contents of those endpoints.

9
00:00:35,190 --> 00:00:41,730
So it's loosening up those first 10 items that are available so we can go under under films, species,

10
00:00:41,730 --> 00:00:45,480
vehicles, starships, planets, people.

11
00:00:45,660 --> 00:00:50,600
And then when you click those, you get additional details about the selection.

12
00:00:50,790 --> 00:00:54,020
So we're putting all of the JSON data.

13
00:00:54,030 --> 00:01:03,030
And if it is an object or an array, then we're outputting the contents as a string of value into the

14
00:01:03,030 --> 00:01:04,600
visual area for the user.

15
00:01:04,920 --> 00:01:09,900
So we need to still add some styling and make some additional tweaks and updates because there's a lot

16
00:01:09,900 --> 00:01:11,140
of data that's coming back.

17
00:01:11,310 --> 00:01:14,340
So that's going to be coming in the upcoming lesson.

18
00:01:14,460 --> 00:01:20,310
But this lesson we're setting up, the basic structure of the application start by opening up and creating

19
00:01:20,310 --> 00:01:22,920
the index file, the indexed HTML file.

20
00:01:22,950 --> 00:01:27,640
So this is just the standard template that we've been using in the previous lessons as well.

21
00:01:27,870 --> 00:01:34,140
So with a head and then the body and within the body, there's a few HTML elements so that each one,

22
00:01:34,140 --> 00:01:40,110
the input, the button and a div in order that we can output and produce the output for the user when

23
00:01:40,110 --> 00:01:45,720
they create the interaction, clicking the button and for the JavaScript, so its linking to create

24
00:01:45,720 --> 00:01:46,310
jobs.

25
00:01:46,590 --> 00:01:53,250
And then here we're selecting the four elements from the page and on the button we've added in click

26
00:01:53,250 --> 00:01:53,600
event.

27
00:01:53,910 --> 00:01:58,780
So listening for a click event on the button and then that outputs ready into the console.

28
00:01:59,010 --> 00:02:03,550
So that means that we're ready to go and to introduce and connect to the API.

29
00:02:03,840 --> 00:02:07,170
So going over to swap dot dev.

30
00:02:07,180 --> 00:02:10,500
So this is where you can find the Star Wars API.

31
00:02:10,500 --> 00:02:13,740
So short for Star Wars API Dev.

32
00:02:13,950 --> 00:02:20,130
And this is an excellent practice resource where you can connect and get some really interesting and

33
00:02:20,130 --> 00:02:23,840
cool Star Wars data back from the API.

34
00:02:24,030 --> 00:02:26,790
And there's a number of endpoints for this API.

35
00:02:26,790 --> 00:02:32,550
So you can get people, you can get planets, you can get starship's and this gives you a sample of

36
00:02:32,580 --> 00:02:34,440
the result that is returned back.

37
00:02:34,890 --> 00:02:40,580
So we are going to be connecting to this API and returning back content from the API.

38
00:02:40,830 --> 00:02:46,080
So the base root of the API is swapping Dev for API.

39
00:02:46,320 --> 00:02:51,570
So lets just select that and you can also open that up in a new tab.

40
00:02:51,750 --> 00:02:58,380
So you can see they've got a testing API area here and you can see the information that's being returned

41
00:02:58,380 --> 00:02:58,680
back.

42
00:02:58,890 --> 00:03:01,510
So they basically give you a listing of all the endpoints.

43
00:03:01,710 --> 00:03:06,970
So we're going to go through all of these endpoints and return back the content at these endpoints.

44
00:03:07,380 --> 00:03:10,080
So that's the first Yooralla that we're connecting to.

45
00:03:10,410 --> 00:03:18,360
And I just call it mean your URL and add that into our JavaScript code so that we have it on hand and

46
00:03:18,360 --> 00:03:21,730
we can connect to the other APIs afterwards.

47
00:03:21,730 --> 00:03:27,900
So once we make the initial load of the page content, we want to load all of the APIs.

48
00:03:29,040 --> 00:03:32,550
So let's add in our window objects and add event listener.

49
00:03:32,730 --> 00:03:41,400
And this event listener is going to be listening for DOM content loaded and whatever the DOM content

50
00:03:41,400 --> 00:03:43,620
is loaded and the event is going to fire off.

51
00:03:43,860 --> 00:03:48,710
And this is where we're going to update our Don our DOM elements on the page.

52
00:03:49,230 --> 00:03:55,650
So let's put it into the console and make sure that we're capturing that properly so we should see it

53
00:03:55,680 --> 00:04:02,030
whenever the DOM content is loaded, that we get the message ready and so that we have a unique message.

54
00:04:02,040 --> 00:04:03,840
Let's put Dom ready.

55
00:04:04,270 --> 00:04:09,510
And this is similar to if you're familiar with query that the document ready object.

56
00:04:09,720 --> 00:04:16,290
So basically the window dom content loaded fires off whenever the DOM elements are loaded.

57
00:04:16,410 --> 00:04:19,500
And that means that we're ready to interact with the DOM page.

58
00:04:19,620 --> 00:04:24,410
And if we want to load additional content onto the page, then this is where we can do that.

59
00:04:24,750 --> 00:04:30,330
So now that we've loaded that, we want to make a request to the main URL.

60
00:04:30,630 --> 00:04:34,410
So let's set up and create our fetch request to the mean.

61
00:04:34,410 --> 00:04:39,300
You are all so Futch and then the path that we're connecting to.

62
00:04:39,300 --> 00:04:49,830
So that's under the mean you url and using then and get the response object back and then we want to

63
00:04:49,830 --> 00:04:55,380
return the response object and hopefully it s an adjacent format.

64
00:04:55,590 --> 00:04:59,880
So we're turning it back as a JSON object or JavaScript object.

65
00:05:00,340 --> 00:05:05,310
And then we can change together the next promise, and this is where we've actually got the jigsaw and

66
00:05:05,320 --> 00:05:10,300
data in a usable format, so let's put that into the console.

67
00:05:10,510 --> 00:05:15,700
We'll take a look at the JSON data and then break it apart and then see how we can add it to our page.

68
00:05:16,030 --> 00:05:18,130
So these are all the different end points.

69
00:05:18,640 --> 00:05:23,110
They've got films, people, planets, species, starships and vehicles.

70
00:05:23,320 --> 00:05:27,640
So we want to live through all of those and put them on the page.

71
00:05:27,880 --> 00:05:31,720
So the property name is the one that we want to display.

72
00:05:31,870 --> 00:05:34,660
And then when it gets clicked, then we want to load the.

73
00:05:35,720 --> 00:05:42,260
You are accordingly, so we need to break apart and take apart the object, and we saw that in the previous

74
00:05:42,260 --> 00:05:49,020
lesson, that we can loop through the object data and get all of the object information onto the page.

75
00:05:49,160 --> 00:05:55,700
Now, in order to do that, we can use the for instatement, which iterates over all the properties

76
00:05:55,700 --> 00:06:00,950
of an object that are keyed by strings and ignores the key by symbols, including inherited.

77
00:06:01,160 --> 00:06:08,330
So basically, if this is the object we can loop through and we can get the property name and then using

78
00:06:08,330 --> 00:06:14,940
the object and bracket notation, we can return back the property contents of that object.

79
00:06:15,260 --> 00:06:23,090
So now that we've got the object and we're outputting it as property so we can see that we're outputting

80
00:06:23,090 --> 00:06:28,040
it within the adjacent variable, putting it to the page, and that's our object.

81
00:06:28,280 --> 00:06:36,470
So we can use the for in statement and set up whatever the property is in, whatever the object name

82
00:06:36,470 --> 00:06:45,290
is, and iterate through all of that content and then using the console log and they're using template

83
00:06:45,290 --> 00:06:47,110
literal there in that example.

84
00:06:47,360 --> 00:06:54,560
So they're outputting the property and also then they're outputting the object.

85
00:06:54,650 --> 00:06:58,550
So using whatever the object is and bracket notation.

86
00:07:00,430 --> 00:07:06,700
With the property name and that said, I would put the value into the console, so let's see what happened.

87
00:07:07,010 --> 00:07:14,650
So we see we've got the people and then we've got the path to where the property name is.

88
00:07:14,650 --> 00:07:19,820
So we're putting into the console and we can just as easily output it onto the page.

89
00:07:20,500 --> 00:07:25,420
So how about we create a new element on the page?

90
00:07:28,900 --> 00:07:37,510
Or we can update the H1 and list out a bunch of buttons there so that when those buttons are clicked

91
00:07:37,720 --> 00:07:41,820
that it will provide the user the list of property options.

92
00:07:42,430 --> 00:07:48,790
So selecting the each one element and typically this isn't ideal, but there's a number of ways that

93
00:07:48,790 --> 00:07:49,840
you can produce this.

94
00:07:50,050 --> 00:07:51,910
So you can do that with the output.

95
00:07:52,360 --> 00:07:55,000
And then we also need an area for outputting content.

96
00:07:55,210 --> 00:07:56,860
So I'm not going to use the output.

97
00:07:56,860 --> 00:07:58,240
I am going to use the each one.

98
00:07:58,600 --> 00:08:01,620
But this is optional and you can update your HTML as needed.

99
00:08:02,440 --> 00:08:13,600
So as we're looping through, let's create a div or actually this is going to be a button and a use

100
00:08:13,600 --> 00:08:14,230
button there.

101
00:08:16,360 --> 00:08:23,770
So I just rename that to button one, so we're creating a brand new button and then document create

102
00:08:23,770 --> 00:08:31,870
elements and the element that we're creating is going to be a button and then for that button adding

103
00:08:31,870 --> 00:08:33,950
and text content of the button.

104
00:08:34,330 --> 00:08:38,700
So this is going to be equal to whatever the property value was.

105
00:08:39,430 --> 00:08:47,020
And then from the button, let's take the each one and append the button, object to the each one.

106
00:08:47,830 --> 00:08:53,510
And just before we do that will clear out the contents of the inner HTML of each one.

107
00:08:53,860 --> 00:08:56,170
So don't want to have any excess content there.

108
00:08:56,660 --> 00:08:59,980
And I do need to wrap this with biotech's.

109
00:09:00,850 --> 00:09:02,590
So that gives us our buttons.

110
00:09:02,860 --> 00:09:09,010
And when the buttons get clicked, then we want to make a futch request and return back the results

111
00:09:09,010 --> 00:09:09,750
on the page.

112
00:09:10,570 --> 00:09:12,620
So let's add that in as well.

113
00:09:12,640 --> 00:09:17,290
So adding in the button and we might also want to add a little bit of styling to the button.

114
00:09:22,220 --> 00:09:25,900
I was either at the end, so adding in some padding

115
00:09:28,600 --> 00:09:29,770
and a border.

116
00:09:33,670 --> 00:09:37,450
And border radius so slightly rounded on the buttons.

117
00:09:40,220 --> 00:09:49,520
And make the font size bigger and add that class to the button object that we just created using the

118
00:09:49,520 --> 00:09:51,860
class list and add.

119
00:09:54,900 --> 00:10:01,800
So add the class to the buttons, so nice and big, also, let's add in the margin.

120
00:10:06,230 --> 00:10:11,330
And the reason they're so big is because they're already sitting within each one, so maybe we actually

121
00:10:11,330 --> 00:10:12,350
want to make them smaller.

122
00:10:15,100 --> 00:10:17,410
So they're already getting properties from the H1.

123
00:10:20,180 --> 00:10:29,330
And I usually like to transform the text, so just transform it all to uppercase and then for the buttons

124
00:10:29,330 --> 00:10:29,990
itself.

125
00:10:32,880 --> 00:10:37,380
I didn't hover effect, so whenever they get hovered.

126
00:10:39,610 --> 00:10:48,450
And that will update obesity and also let's update the cursor to a pointer for the button.

127
00:10:50,080 --> 00:10:53,740
So we've got the buttons and now we want to make the buttons clickable.

128
00:10:53,740 --> 00:10:56,170
So we go back to JavaScript in order to do that.

129
00:10:58,750 --> 00:11:07,060
And within the button, so the button object, let's add an event listener and the event that we're

130
00:11:07,060 --> 00:11:08,140
listening for is a click.

131
00:11:08,320 --> 00:11:16,270
So whenever it gets clicked, then it's going to be getting the data and we'll just keep the function

132
00:11:16,270 --> 00:11:22,660
like that and add in the get the data method or function.

133
00:11:25,360 --> 00:11:32,260
And we're only going to be passing in the event object and then using the console log to log the event

134
00:11:32,590 --> 00:11:33,100
target.

135
00:11:33,310 --> 00:11:38,350
So what this is going to be doing is this is going to be picking up the element that initiated that

136
00:11:38,350 --> 00:11:38,740
event.

137
00:11:39,070 --> 00:11:49,330
And I'll show you how we can pass through the Urals within the object, the element that got clicked.

138
00:11:51,280 --> 00:11:58,990
So within the button, we're going to set up your URL and just make it a unique property name, because

139
00:11:58,990 --> 00:12:05,710
the button itself is an object and we're able to add properties to that object and then we pick up the

140
00:12:05,710 --> 00:12:07,840
same object using the target.

141
00:12:08,650 --> 00:12:14,190
And that way we can reference back and get the URL from the property.

142
00:12:16,180 --> 00:12:20,170
And that's going to be contained within the adjacent property.

143
00:12:21,640 --> 00:12:24,870
And we can also get rid of the tactics here as well.

144
00:12:28,030 --> 00:12:35,200
So since we're referencing this button, it's got this, you are all hidden and that's the value that

145
00:12:35,200 --> 00:12:36,000
we've got there.

146
00:12:36,550 --> 00:12:43,300
So that's how we can set up and get the elements that targeted at.

147
00:12:46,540 --> 00:12:54,640
And if we use the console log and reference the elements, then we can get that property value back

148
00:12:54,640 --> 00:12:55,870
from within the element.

149
00:12:56,440 --> 00:13:03,940
So there we've got the elements and whatever it gets clicked, we're passing through the correct path.

150
00:13:04,330 --> 00:13:09,820
So that means that we can use that and output that content onto the page.

151
00:13:11,740 --> 00:13:18,700
So let's try that as well, where we're going to just output and make a feature request.

152
00:13:21,780 --> 00:13:30,300
And I'll just call it Get Jason and what we need here is a URL to get the Jason from Sumika vets request

153
00:13:30,300 --> 00:13:40,800
to the endpoint that you are ill and then we get the response object and return back the response object

154
00:13:41,910 --> 00:13:51,150
as Jason Then the next promises where we get the data and then within the data, we're just going to

155
00:13:51,150 --> 00:13:52,700
log it out to the console right now.

156
00:13:55,330 --> 00:14:02,350
And then we'll decide what we want to do with it afterwards, so comment database and update this to

157
00:14:02,350 --> 00:14:03,240
get Jason.

158
00:14:03,640 --> 00:14:11,740
So we're passing in the euro that's being defined over here to the button object properties of Earl

159
00:14:11,740 --> 00:14:14,140
Z, and that's picking up that value.

160
00:14:14,260 --> 00:14:18,300
And then we're just re picking that back up within the getData.

161
00:14:19,720 --> 00:14:29,940
So when we click the button that returns back the count of values and returns back results are array

162
00:14:30,400 --> 00:14:39,160
and then also gives us a total here so we can loop through and they're all going to return back within

163
00:14:39,160 --> 00:14:46,060
the same structure where they've got the results and all the results are going to have different property

164
00:14:46,060 --> 00:14:46,410
names.

165
00:14:47,770 --> 00:14:53,830
So what we want to do is we want to output the results on the page and then have those clickable so

166
00:14:53,830 --> 00:14:59,020
that the user can interact with those and take a closer look at the content that's contained within

167
00:14:59,020 --> 00:14:59,260
those.

168
00:15:00,870 --> 00:15:08,430
And it also does have the next page, so it's got page two so we can passionate the content, moved

169
00:15:08,430 --> 00:15:10,160
to the next page of the content.

170
00:15:11,550 --> 00:15:13,160
So we'll be setting that up as well.

171
00:15:13,710 --> 00:15:20,040
Once we return back the content as data, then we can create another function and this function will

172
00:15:20,040 --> 00:15:24,850
build the page and we're going to return back and retrieve the data.

173
00:15:25,470 --> 00:15:28,730
So passing into build data as the next step.

174
00:15:29,130 --> 00:15:32,480
And then what we want to do is we want to iterate through the contents.

175
00:15:32,820 --> 00:15:38,760
In addition, we want to add in, if there's additional pages, add those page values down below as

176
00:15:38,760 --> 00:15:39,070
well.

177
00:15:39,600 --> 00:15:49,410
So let's put the data into the console and then we'll break apart the structure of the JSON object and

178
00:15:49,410 --> 00:15:50,900
get it in a usable format.

179
00:15:51,420 --> 00:15:58,050
And I'm also going to remove out some of the console content as we don't need all of this information

180
00:15:58,050 --> 00:15:58,290
here.

181
00:16:00,100 --> 00:16:07,690
So just comment about some of it and we want to load, so when the button gets clicked, we want to

182
00:16:07,690 --> 00:16:13,710
load all of this information and we also get an indication of how many pages there are by the count.

183
00:16:14,320 --> 00:16:17,550
And also there's next page and previous page.

184
00:16:17,830 --> 00:16:23,470
So we want to build out the page options to go to the different pages, but we also want to iterate

185
00:16:23,470 --> 00:16:26,510
through the results and create them in the output area.

186
00:16:26,950 --> 00:16:34,750
So let's do that first, where we're going to take the data and the results and iterate through for

187
00:16:34,750 --> 00:16:36,790
each one of the results.

188
00:16:39,600 --> 00:16:42,360
And these are just going to be the different items or elements.

189
00:16:46,130 --> 00:16:52,430
And let's for now will console log the elements as these are the first ones that we want to output.

190
00:16:54,890 --> 00:17:01,160
So these are all the different elements and they're all going to have different properties.

191
00:17:02,940 --> 00:17:12,780
So what we can do is we can and we want to look for inconsistencies within them and within the API itself.

192
00:17:13,020 --> 00:17:15,660
There's the one consistency is that you are El.

193
00:17:18,190 --> 00:17:21,370
So they all have you or else to get more information.

194
00:17:23,070 --> 00:17:28,590
So we can use that to retrieve additional content whenever it gets clicked.

195
00:17:30,740 --> 00:17:35,960
And we're just checking for right now some other consistencies, so they all have names as well, so

196
00:17:35,960 --> 00:17:39,770
we can use the name and the euro and output those on the page.

197
00:17:41,060 --> 00:17:42,980
So let's list the name.

198
00:17:43,760 --> 00:17:47,440
And then there's also your URL and I would put them onto the page.

199
00:17:48,170 --> 00:17:52,400
So take output and update the inner HTML of output.

200
00:17:52,520 --> 00:17:53,390
Just clear that.

201
00:17:54,230 --> 00:18:01,690
Now let's create an element for the page so you can just call it div and using the document create element.

202
00:18:01,880 --> 00:18:03,230
So we want to make this element.

203
00:18:03,230 --> 00:18:10,700
When it gets clicked then it will go to make a fetch request to the euro and each one of these and then

204
00:18:10,700 --> 00:18:13,170
output that content within the output area.

205
00:18:13,520 --> 00:18:16,100
So that's why we're creating a separate elements.

206
00:18:16,100 --> 00:18:19,580
And this can be anything could be a div as we're doing this with JavaScript.

207
00:18:19,590 --> 00:18:26,210
So making it clickable and within the div update, the text content and the text content of the div

208
00:18:26,480 --> 00:18:32,690
is going to be the element name and then take that element and add it to the parent element.

209
00:18:32,690 --> 00:18:35,840
So the append and appending the div.

210
00:18:36,830 --> 00:18:39,550
So let's see what happens and how that looks visually.

211
00:18:40,490 --> 00:18:46,700
So we've got all of these items here and we can also add in and do some styling for these.

212
00:18:47,420 --> 00:18:49,490
And I'll do this with class.

213
00:18:51,530 --> 00:18:53,000
So I didn't see some padding.

214
00:18:56,570 --> 00:19:02,060
And also, let's do a text, a line so central, a line set with.

215
00:19:07,270 --> 00:19:09,790
And this is also whatever you prefer.

216
00:19:15,440 --> 00:19:21,590
And as I want to make these clickable items, that's where I'm going to be applying the box to that

217
00:19:21,590 --> 00:19:22,040
element.

218
00:19:26,720 --> 00:19:34,370
So that the user knows that these are going to be clickable so we can add in a hover effect and others

219
00:19:34,370 --> 00:19:34,860
to that.

220
00:19:35,810 --> 00:19:37,970
So let's add in the cursor.

221
00:19:42,860 --> 00:19:51,410
And also, let's do a background color, so background color and I'll make a black background and color

222
00:19:51,410 --> 00:19:59,050
of the font is going to be white and I'm going to set a margin for top and bottom of five picks.

223
00:19:59,990 --> 00:20:01,160
So see what that looks like.

224
00:20:02,870 --> 00:20:10,310
And so now whenever they get hovered over to give them that more clickable type a feel, let's just

225
00:20:10,310 --> 00:20:11,350
do it the opacity.

226
00:20:13,360 --> 00:20:15,200
You could also update the background color.

227
00:20:15,770 --> 00:20:17,030
Actually, let's do something different.

228
00:20:17,030 --> 00:20:18,670
We'll update the background color to read.

229
00:20:18,950 --> 00:20:21,810
It actually doesn't matter whatever you prefer for the styling.

230
00:20:23,570 --> 00:20:30,110
So now whenever you hover over these and we need to add in the click action, so what the click action

231
00:20:30,110 --> 00:20:38,360
is going to be doing is that it's going to be loading the you are all content and actually it looks

232
00:20:38,360 --> 00:20:44,320
like films doesn't have a name within the results.

233
00:20:45,920 --> 00:20:52,330
So let's double check that out, its name or title.

234
00:20:53,300 --> 00:20:54,190
So do it that way.

235
00:20:54,200 --> 00:20:59,630
We're so one way or another, we'll get some content output there.

236
00:20:59,840 --> 00:21:05,680
And it usually you do need to or you should double check just to make sure that it's loading properly.

237
00:21:07,310 --> 00:21:09,650
And so now all of them are going to be consistent.

238
00:21:09,800 --> 00:21:15,170
And when they get clicked, we want to just load the you are all content and loop through all the properties

239
00:21:15,320 --> 00:21:18,270
and output the contents of the properties on the page.

240
00:21:19,040 --> 00:21:28,110
So now once we click it, so we're going to add in to these elements as well and add the euro.

241
00:21:28,130 --> 00:21:30,170
So that's all within the element euro.

242
00:21:34,160 --> 00:21:39,770
And whenever they get clicked, so they have and at an event listener to the element that we're just

243
00:21:39,770 --> 00:21:40,160
creating.

244
00:21:43,950 --> 00:21:45,690
And that will just.

245
00:21:51,640 --> 00:21:56,980
And we'll just create a function called show item, so that will be the next function that we're going

246
00:21:56,980 --> 00:21:58,510
to work on in the list here.

247
00:22:02,440 --> 00:22:14,860
And that's passing in the event target, and we'll get the elements using the event target, so that

248
00:22:14,860 --> 00:22:23,230
way we can console log the elements, you, Earl, whatever it gets clicked.

249
00:22:23,320 --> 00:22:29,710
So let's just make sure that that's working so that whenever I click these, I should be able to load

250
00:22:29,710 --> 00:22:33,700
the details of whatever item I've clicked.

251
00:22:35,940 --> 00:22:42,900
And that looks like it's working, it should be fairly consistent, so now we can get the details and

252
00:22:42,900 --> 00:22:45,180
load it to the output, whatever that gets clicked.

253
00:22:46,660 --> 00:22:53,490
So that's what we want to do here is where we want to make another Futch request to this URL and then

254
00:22:53,490 --> 00:22:55,510
build the item on the page.

255
00:22:56,850 --> 00:23:05,280
So from here, we can just make our Futch request because they're all passing in the euro and this should

256
00:23:05,280 --> 00:23:07,140
all be coming back as JSON.

257
00:23:07,140 --> 00:23:16,280
So the response should all be back as an adjacent object and then we'll output it to the page as data.

258
00:23:18,090 --> 00:23:21,690
And for now, we'll just consult, log the data contents.

259
00:23:22,920 --> 00:23:25,980
And also, I am going to add in a catch.

260
00:23:29,100 --> 00:23:31,410
And let me wrap this with the brackets.

261
00:23:36,350 --> 00:23:43,730
And let's add in a catch in case we have any issues and we'll get the ER contents.

262
00:23:46,810 --> 00:23:54,760
And we can load that onto the page and we can just put out put that in our HTML and we'll just write

263
00:23:54,760 --> 00:23:55,560
the error.

264
00:23:56,770 --> 00:24:01,210
So if we do have any problems getting the data and we'll just output error on the page.

265
00:24:03,640 --> 00:24:08,950
So it looks like we are able to get the data and just as we did for.

266
00:24:12,030 --> 00:24:18,450
In order to get the property values and the object information, we're going to do the same thing.

267
00:24:18,450 --> 00:24:22,140
We were just going to list out all of the contents that are being returned back here.

268
00:24:23,160 --> 00:24:24,960
And there are some that are arrays.

269
00:24:25,530 --> 00:24:28,380
So we have to as we're looping through, we'll check the data types.

270
00:24:30,710 --> 00:24:37,850
So looking for the property and data, so let's update that and that's actually data.

271
00:24:41,180 --> 00:24:43,460
And again, you can shorten it if you want.

272
00:24:43,910 --> 00:24:48,320
I usually like to shorten that so it's a little bit easier and shorter to right.

273
00:24:50,630 --> 00:24:52,700
So let's see what we get back here.

274
00:24:59,660 --> 00:25:02,770
So clear that and let's click one of those and see what we've got.

275
00:25:05,670 --> 00:25:11,150
So we've got a listing of the films, so that's within an array, the residence as well.

276
00:25:15,120 --> 00:25:21,600
So we'll leave it at that and you can also, as you loop through, you can see if this particular item

277
00:25:21,600 --> 00:25:25,770
is an object or if it's a string value.

278
00:25:26,040 --> 00:25:27,960
So you can take the data types.

279
00:25:30,140 --> 00:25:34,250
And console logged the various data types of the elements.

280
00:25:38,410 --> 00:25:41,350
And you can get that data type by type of.

281
00:25:48,330 --> 00:25:55,140
So let's load some content, so see, there's a string and if it's not a string, it's an object.

282
00:25:55,950 --> 00:26:03,610
So we can do a check to see if the type of is equal to string, then we're OK to output it.

283
00:26:03,840 --> 00:26:07,080
Or else what we need to do is just string of five that value.

284
00:26:11,260 --> 00:26:13,030
And let's create a variable.

285
00:26:16,010 --> 00:26:23,300
For whatever the homeless and using a ternary operator, we're going to check the condition to see if

286
00:26:23,300 --> 00:26:28,880
it is a string and if it has a string, then we're OK to output.

287
00:26:31,060 --> 00:26:31,990
The content.

288
00:26:35,690 --> 00:26:42,770
And that should be a question mark, and there's the calling for the alternative, and if there is a

289
00:26:42,770 --> 00:26:50,030
need for the alternative that we can use that Jason string of PHY to string offi the contents of the

290
00:26:50,030 --> 00:26:50,870
property object.

291
00:26:53,240 --> 00:26:59,930
And let's update the view to toggle the word drop and now within the output.

292
00:27:01,770 --> 00:27:12,480
So we want to clear the air, put the entire HTML and just set that to blank, and then as we update

293
00:27:12,480 --> 00:27:17,580
the output, the inner turmoil of output and using the biotech's.

294
00:27:20,160 --> 00:27:23,010
We can get the property.

295
00:27:25,250 --> 00:27:28,610
And then also get the e-mail content.

296
00:27:32,080 --> 00:27:33,280
So let's see how that works.

297
00:27:35,840 --> 00:27:42,290
And so that's OK, putting those values there, let's actually separate them as separate divorce.

298
00:27:46,190 --> 00:27:49,400
So a little bit easier to read, and then, of course, we could add classes as well.

299
00:27:51,100 --> 00:27:54,310
So that's our details there being output.

300
00:27:56,750 --> 00:28:04,730
And then the films, because this was an object, it's got string of light and you can also within the

301
00:28:04,740 --> 00:28:09,710
condition, if you want to break apart the object and loop through the items within the object, you

302
00:28:09,710 --> 00:28:10,580
can do that as well.

303
00:28:10,970 --> 00:28:17,330
So in this case, it looks like it's producing different end points so you can loop through those and

304
00:28:17,330 --> 00:28:19,010
get the details of the endpoints.

305
00:28:22,500 --> 00:28:25,160
Test it out just to make sure that it is working.

306
00:28:26,250 --> 00:28:30,630
And you could be ready to move on to the next lesson where you are still doing some tweaks and adjustments

307
00:28:30,630 --> 00:28:36,960
to this up many application, the tasks for this lesson are to connect to the end point the Star Wars

308
00:28:36,960 --> 00:28:42,750
and point load and create the elements from the JSON data that's being returned back from the endpoint.

309
00:28:42,960 --> 00:28:51,540
So construct your user interface and interaction screen from the data from the endpoint and dynamically

310
00:28:51,540 --> 00:28:57,500
generate it and then also create interactive page elements that load additional content from the page.

311
00:28:57,870 --> 00:29:04,410
Again, making connections to the JSON endpoint, make more fêtes requests depending on what the user

312
00:29:04,410 --> 00:29:12,360
selection, and create a dynamic and interactive experience all generated from the Star Wars API endpoint

313
00:29:12,600 --> 00:29:14,670
for users within your Web page.