1
00:00:04,690 --> 00:00:09,370
In this lesson, we're going to be updating the functionality of the app, connecting to a different

2
00:00:09,370 --> 00:00:14,650
endpoint and allowing the user to search by name so they can enter in a name into the search field.

3
00:00:15,070 --> 00:00:22,960
When they click the name, they get their corresponding results so they can enter in whatever name they

4
00:00:22,960 --> 00:00:23,320
want.

5
00:00:23,720 --> 00:00:28,960
And it's going to just return back whatever results are matching within the database.

6
00:00:29,500 --> 00:00:33,430
And once they get the results, they can click it and they can see more details.

7
00:00:33,970 --> 00:00:39,400
So what we're doing here is we're string applying the objects and that includes the arrays as well.

8
00:00:39,580 --> 00:00:41,820
So they're just being string of right here.

9
00:00:42,310 --> 00:00:47,290
There's a number of ways to output this content so you can customize it as needed.

10
00:00:47,740 --> 00:00:50,080
So there's some arrays, there's some objects.

11
00:00:50,240 --> 00:00:55,540
And this is in relation to the content that's being returned back from the click.

12
00:00:56,080 --> 00:00:59,700
And there's quite a bit of information contained within the JSON data.

13
00:01:00,010 --> 00:01:04,320
So multiple levels of the object and they contain arrays, objects.

14
00:01:04,660 --> 00:01:09,430
And this is just a dump of all of the information that's contained for this particular object.

15
00:01:10,270 --> 00:01:14,680
So that's the application that we're going to be building in this lesson.

16
00:01:14,920 --> 00:01:19,540
And instead of loading the data, we're going to make a request to another end point, and that's going

17
00:01:19,540 --> 00:01:21,480
to be a search by country name.

18
00:01:22,120 --> 00:01:24,780
So using the input field that we have.

19
00:01:24,970 --> 00:01:32,980
So going into the application, let's update this to see apps to James and then we're going to duplicate

20
00:01:33,010 --> 00:01:35,500
this content as apps to James.

21
00:01:39,330 --> 00:01:43,740
So that way we're still loading the same application and we're just going to make some updates to the

22
00:01:43,740 --> 00:01:50,130
code so we're no longer going to be hiding and the text content for the button is going to be search.

23
00:01:53,560 --> 00:01:57,430
By name, and then we can get rid of that.

24
00:02:00,220 --> 00:02:00,850
Search.

25
00:02:03,260 --> 00:02:04,520
Country info.

26
00:02:04,610 --> 00:02:10,270
So that's fine, we can leave it at that and then that listener is going to make her request.

27
00:02:10,430 --> 00:02:12,080
So let's update the end point.

28
00:02:12,680 --> 00:02:17,810
And the way that I usually like to do is I like to just copy it out.

29
00:02:18,110 --> 00:02:26,060
So however, we're doing the search and then also try it out as well within that end point just to see

30
00:02:26,060 --> 00:02:27,620
that it's working properly.

31
00:02:27,860 --> 00:02:31,270
So our original base, Earl, is the V2.

32
00:02:31,940 --> 00:02:38,150
So whatever the name is, is going to be what's going to go into the parameters and then for the input

33
00:02:38,150 --> 00:02:38,530
name.

34
00:02:38,960 --> 00:02:43,220
So finalize that with what we've got for the input value.

35
00:02:44,480 --> 00:02:47,420
And right now what we can search, we can set a value.

36
00:02:49,160 --> 00:02:51,530
And right now that maybe we just see United

37
00:02:54,230 --> 00:03:01,280
so that we we're creating the same type of search request that we're returning back here in the example

38
00:03:02,030 --> 00:03:05,630
and then add to it whatever the input value is at the time.

39
00:03:05,640 --> 00:03:09,290
So that allows the user to make an update to the value we make.

40
00:03:09,290 --> 00:03:17,450
The request and sort of create pages will just log it out to the console and let's try that out.

41
00:03:18,290 --> 00:03:21,960
So we return back the six results that are matching with the name.

42
00:03:22,790 --> 00:03:28,880
So we want to output those to the page and we're trying to reuse quite a bit of what we did in the last

43
00:03:28,880 --> 00:03:29,300
lesson.

44
00:03:29,630 --> 00:03:32,300
So we're not reiterating over it.

45
00:03:32,810 --> 00:03:38,620
So we're not creating the pages, but we're outputting the content from that particular page.

46
00:03:39,110 --> 00:03:44,510
So instead of doing the load pages, we're going to pass information into the load of pages.

47
00:03:44,870 --> 00:03:54,260
And then we're also not using the page the pagination so we can remove out that function as well.

48
00:03:55,130 --> 00:04:02,110
And if we want to just load the pages, let's load the pages using the data.

49
00:04:02,720 --> 00:04:03,650
So instead of.

50
00:04:04,680 --> 00:04:08,020
Just looking at the data, we'll do a load of the data.

51
00:04:08,850 --> 00:04:16,020
So for the data itself, we can pass that as a data object and the structure of these objects are going

52
00:04:16,020 --> 00:04:18,060
to be the same as we saw in the last lesson.

53
00:04:18,810 --> 00:04:27,150
So we can loop through each one of them and output the element on the page so that a whole lot of change

54
00:04:27,570 --> 00:04:31,670
that gives this ability to load the contents of each one of those.

55
00:04:31,950 --> 00:04:37,590
So we made some changes to the endpoint and then also the data that we're loading with, not with very

56
00:04:37,590 --> 00:04:39,680
minimal change to the actual source code.

57
00:04:40,080 --> 00:04:44,780
And also, let's do a quick update on what we're outputting.

58
00:04:45,060 --> 00:04:48,320
So we've got access to all of this information.

59
00:04:49,110 --> 00:04:52,460
We can also update and have a native name as well.

60
00:04:52,920 --> 00:04:57,210
So setting that information might create the node.

61
00:05:01,210 --> 00:05:05,240
And this will be Title two and append it to me.

62
00:05:05,650 --> 00:05:11,740
It can be a div and this can just be a regular div, it doesn't work.

63
00:05:11,750 --> 00:05:15,730
So we don't even need to include a defense to it because we're already wrapping it within a div.

64
00:05:16,120 --> 00:05:22,210
So instead of name, take the object information native name.

65
00:05:23,110 --> 00:05:30,010
And so that will output sometimes through something different onto the page and we don't need that title

66
00:05:30,010 --> 00:05:30,370
to.

67
00:05:32,270 --> 00:05:42,340
Just underneath the flag, if you want some additional information, we can also have multiple different,

68
00:05:42,620 --> 00:05:49,250
sir, just giving the object a name and you don't actually need to give it a name if you just want to

69
00:05:49,250 --> 00:05:51,500
create a node suspending it to.

70
00:05:52,340 --> 00:05:53,510
And if it's a div.

71
00:05:53,510 --> 00:05:55,040
So if you want to add another div.

72
00:05:56,050 --> 00:06:06,850
And instead of the native name sub region, so creating the function is really saving a lot of time

73
00:06:07,240 --> 00:06:13,890
and it's allowing us to very easily update the content that we're outputting and customize it.

74
00:06:14,320 --> 00:06:19,090
So if you do want to apply some additional styling or properties to the element, you can make that

75
00:06:19,090 --> 00:06:19,750
selection.

76
00:06:19,990 --> 00:06:24,300
And if you just want to output the information, you can do that as well.

77
00:06:24,520 --> 00:06:27,040
Let's add one more function to this.

78
00:06:27,370 --> 00:06:34,270
And within mean, we're going to add an event listener and this event listener is going to load the

79
00:06:35,290 --> 00:06:36,190
information.

80
00:06:43,180 --> 00:06:50,770
And because the search already returned back, all of the object details, we can just pass over the

81
00:06:50,770 --> 00:06:57,400
object details that we have for this particular element and we can build a new page from it.

82
00:06:57,640 --> 00:06:59,110
So we're adding an event listener.

83
00:06:59,110 --> 00:07:03,790
The event is going to be click and whenever the page gets clicked.

84
00:07:07,210 --> 00:07:09,040
We can let it create a separate page.

85
00:07:13,140 --> 00:07:16,800
And let's get rid of that so at the event listener.

86
00:07:20,290 --> 00:07:24,850
And make a page and just pass through the data from the object.

87
00:07:27,800 --> 00:07:31,910
So when we do want to make a separate page of content.

88
00:07:35,040 --> 00:07:39,330
Make a page and this will load all of the page data.

89
00:07:41,590 --> 00:07:49,000
So we can actually load through and list out all of the existing values that we have within the properties.

90
00:07:53,350 --> 00:08:01,930
So because the data is going to be a large object, we can use the object methods and get the keys from

91
00:08:01,930 --> 00:08:07,480
the object and setting up the object as data.

92
00:08:10,200 --> 00:08:15,810
And then because it's going to return back injury, we can loop through each one of those and get the

93
00:08:15,810 --> 00:08:19,080
key value from the array.

94
00:08:20,650 --> 00:08:32,350
And that way, if we can output the contents of the key and we'll do the do a console of the key value.

95
00:08:35,930 --> 00:08:49,310
And if we want to see the key information, we can use the bracket notation and using the data and specifying

96
00:08:49,310 --> 00:08:51,530
the key, that's going to return back the value.

97
00:08:52,190 --> 00:08:57,980
So this is the value and that's going to be the object key.

98
00:09:02,650 --> 00:09:07,900
And that way, we can prepare for what we want to output on the page and then using that function that

99
00:09:07,900 --> 00:09:12,020
we were constructing the content, we can easily construct that content.

100
00:09:13,030 --> 00:09:14,560
So now whenever I click it.

101
00:09:18,860 --> 00:09:24,470
And let me clear that and we'll click it one more time, it loads through all of the values.

102
00:09:26,430 --> 00:09:30,330
So all of the properties and then notice as well, some of them are going to be.

103
00:09:31,380 --> 00:09:33,130
So we want to loop through those.

104
00:09:33,150 --> 00:09:36,440
So if they do have a length, then we want to loop through them.

105
00:09:37,110 --> 00:09:39,450
And then again, some of them are going to be objects.

106
00:09:44,430 --> 00:09:49,140
So there's three that look like that they're going to be objects, so if we want to output all of this

107
00:09:49,140 --> 00:09:54,030
information, we can check to see if the data has a length.

108
00:09:54,210 --> 00:09:56,510
And if it does, then it's going to be an array.

109
00:09:57,060 --> 00:09:58,770
So let's output this.

110
00:10:01,970 --> 00:10:14,120
And what we'll do is we'll create a main page elements, so attach it to output and then as we iterate

111
00:10:14,120 --> 00:10:22,910
through, actually that's the wrong function to create the main page object using the function, and

112
00:10:22,910 --> 00:10:31,830
then we can create nodes appending them to mean with the contents of the data key.

113
00:10:33,170 --> 00:10:36,220
So this will just create a completely new page.

114
00:10:37,280 --> 00:10:43,090
And we'll also clear out any of the existing content with an output.

115
00:10:43,640 --> 00:10:46,880
And then we always have the search to load the content back.

116
00:10:47,270 --> 00:10:52,520
So we make our initial request, we make a click of it so that outputs the content.

117
00:10:52,940 --> 00:11:00,190
And if these are going to be objects that we might want to iterate through the object as well.

118
00:11:06,120 --> 00:11:13,200
So let's create a separate function called object outputs, and this is going to take in whatever the

119
00:11:13,200 --> 00:11:14,610
object value is.

120
00:11:19,290 --> 00:11:21,600
So copying that information.

121
00:11:22,820 --> 00:11:25,280
And then we'll use the object output or.

122
00:11:27,560 --> 00:11:30,820
To output the values of data

123
00:11:33,860 --> 00:11:38,900
and now that we can pass in an object instead of data, this will be object.

124
00:11:44,590 --> 00:11:50,890
And we also need to have whatever the parent is going to be, so the parent in this case is going to

125
00:11:50,890 --> 00:11:52,090
be the main object.

126
00:11:52,450 --> 00:11:58,780
So we're passing in a couple objects as parameters, and that's so that we can create the note properly

127
00:11:58,780 --> 00:12:00,700
and attach it to the proper element.

128
00:12:01,960 --> 00:12:05,850
So that means that if the key is an object.

129
00:12:06,880 --> 00:12:07,720
So if.

130
00:12:09,510 --> 00:12:13,620
Type of data key.

131
00:12:16,480 --> 00:12:26,110
Is equal to object, then we're going to actually send it in through here.

132
00:12:29,640 --> 00:12:34,620
And that's going to be whatever the current object value is.

133
00:12:38,910 --> 00:12:41,390
Or else it's just going to create a..

134
00:12:50,050 --> 00:12:51,430
So let's see how that works.

135
00:12:51,460 --> 00:12:54,040
So do a search click at.

136
00:13:00,650 --> 00:13:04,910
So it looked like we did have an issue there of the content that we passed.

137
00:13:09,640 --> 00:13:17,140
So most of the content that was able to output, but we did encounter some issues with a value of NUL.

138
00:13:26,460 --> 00:13:32,700
So we'll output this into the console first and we'll continue to just create the nodes and do some

139
00:13:33,390 --> 00:13:39,130
debugging, so to block comment toggle.

140
00:13:40,710 --> 00:13:45,240
And also we're going to output into the console, the data type.

141
00:13:48,550 --> 00:13:55,630
So there might have been a reason for that, it's not being returned back and check the data types.

142
00:14:02,460 --> 00:14:09,120
So we are getting that they are an object data type, and in this case, maybe because there was a null

143
00:14:09,120 --> 00:14:13,820
value there, that it wasn't it didn't have any keys, that it was throwing an error.

144
00:14:14,610 --> 00:14:18,930
So the number of options that you have for that.

145
00:14:25,190 --> 00:14:29,660
And the reason that was happening here is that it was just being passed in as null.

146
00:14:30,170 --> 00:14:34,760
So what I'm going to do is if it is a type of object.

147
00:14:39,110 --> 00:14:43,460
Then let's set the value and we're just going to have a string of high value.

148
00:14:49,690 --> 00:14:57,280
So if and we'll set a variable of value and this is whatever the value of the object is.

149
00:14:59,620 --> 00:15:11,230
And we'll update this value, so if it is a value, then let's take value and use Jason String Afie

150
00:15:11,560 --> 00:15:16,950
to string Afie that value so that I would put a string of fied version of the value.

151
00:15:17,530 --> 00:15:21,100
And then when we create the node, we're just going to use whatever we've got for value.

152
00:15:26,560 --> 00:15:35,110
And this move to create node just above, we close the function, do some indents there, so try that

153
00:15:35,110 --> 00:15:35,800
one more time.

154
00:15:38,430 --> 00:15:41,770
So that give us the string of output of the content.

155
00:15:42,690 --> 00:15:46,800
So it looks like we're ready to complete the application.

156
00:15:53,760 --> 00:16:01,200
So we see we can do a search or turn back information, we'll want to have the hovering effect over

157
00:16:01,200 --> 00:16:01,950
the elements.

158
00:16:04,130 --> 00:16:10,700
So let's add to baulks, Hova, and if we hover, we'll just update the background color.

159
00:16:13,130 --> 00:16:15,080
To be slightly off point.

160
00:16:18,240 --> 00:16:20,700
And also, let's update the cursor.

161
00:16:23,100 --> 00:16:24,300
To pointer.

162
00:16:27,990 --> 00:16:35,160
Now, whenever we hover over it, get this type of effect also for the output.

163
00:16:39,740 --> 00:16:41,630
Just create a class called Infl.

164
00:16:46,300 --> 00:16:49,000
And I'll copy some of the styling properties from there.

165
00:16:50,090 --> 00:16:51,670
Also update the font size.

166
00:16:55,430 --> 00:17:02,720
So setting a margin, we won't need the cursor and apply the class of info to the main parent.

167
00:17:08,590 --> 00:17:15,300
So it's Takamine List ad, and we'll add the class of info to it.

168
00:17:19,160 --> 00:17:27,500
And then let's also add some padding or borders padding, and I was just going to copy it to keep things

169
00:17:27,500 --> 00:17:27,980
simple.

170
00:17:30,590 --> 00:17:35,250
And I've got padding there twice, so let's see what that looks like, snow.

171
00:17:35,270 --> 00:17:37,790
We've got the countries on the search.

172
00:17:38,240 --> 00:17:42,950
If we click it, that gives us an output of the country content.

173
00:17:42,990 --> 00:17:44,870
You can customize this as needed.

174
00:17:47,960 --> 00:17:54,860
The task for this lesson are to connect to the API and return that JSON data allowing the user to customize

175
00:17:54,860 --> 00:17:56,080
the request parameters.

176
00:17:56,090 --> 00:17:57,540
So we are going to be doing a search.

177
00:17:57,830 --> 00:18:03,410
So according to whatever the user input value is, it should adjust the content that's being returned

178
00:18:03,410 --> 00:18:05,870
back from the endpoint of the API load.

179
00:18:05,870 --> 00:18:08,300
All of the object details per item.

180
00:18:09,450 --> 00:18:17,160
Allow the user to make a selection of those items and then generate the page data from that user selection

181
00:18:17,340 --> 00:18:25,230
and pass in the JSON and the JavaScript object from one function to another, allowing the user to see

182
00:18:25,230 --> 00:18:27,240
all of the contents of the object.