1
00:00:00,710 --> 00:00:08,660
OK, so now that we have tested our API endpoint and we have like Chegg that we are receiving data from

2
00:00:08,660 --> 00:00:09,800
this particular and.

3
00:00:10,910 --> 00:00:15,170
So now we were checking it in the console, in our browser.

4
00:00:15,170 --> 00:00:20,690
But now we want to grab that data in our application and we want to grab the values from the endpoint.

5
00:00:20,690 --> 00:00:23,690
We're going to fetch the data and we want to use it or not.

6
00:00:24,350 --> 00:00:26,840
And I did UI displayed in the UI.

7
00:00:27,380 --> 00:00:29,720
So now let's do that.

8
00:00:29,840 --> 00:00:33,860
So first of all, let me just show you that how the data looks like.

9
00:00:33,860 --> 00:00:35,020
I love shown you before.

10
00:00:35,030 --> 00:00:39,110
So this isn't that, but let me assure you, it looks a little cleaner.

11
00:00:39,830 --> 00:00:44,120
So this is how the data we are receiving from the endpoint.

12
00:00:44,690 --> 00:00:54,710
So this is an area and inside and this is an object inside that data classes and this is an area when

13
00:00:54,710 --> 00:00:58,400
there is an array inside that we have objects, array of objects.

14
00:00:59,150 --> 00:01:00,460
And this is a mean.

15
00:01:00,480 --> 00:01:02,150
There's also an object.

16
00:01:02,570 --> 00:01:05,390
So the data is something like this.

17
00:01:05,390 --> 00:01:15,500
It's a little bit of scope and scatter, but now we have to like grab what data we want and that we

18
00:01:15,500 --> 00:01:16,220
want to fight.

19
00:01:16,820 --> 00:01:19,080
OK, so let's go ahead and do it.

20
00:01:19,100 --> 00:01:24,680
So first of all, we want temperature, humidity and air pressure.

21
00:01:24,680 --> 00:01:25,700
So where are they?

22
00:01:26,180 --> 00:01:34,670
OK, so inside the main object that is the temperature will take the pressure and we'll take the humidity.

23
00:01:35,030 --> 00:01:40,190
OK, so let's write code for that, for grabbing this, these values.

24
00:01:40,970 --> 00:01:50,030
So we'll write the code below the like, the data where we knew that we are getting the data not only

25
00:01:50,030 --> 00:01:57,530
to console, so we can just commented, but after that we can just delete it or after we got the data

26
00:01:57,530 --> 00:02:03,810
in the JSON format like data will be a very good start, and that means the result would be converted

27
00:02:03,810 --> 00:02:07,250
to Judaism and that then it would be stored in the data very well.

28
00:02:07,670 --> 00:02:08,390
All right.

29
00:02:08,570 --> 00:02:18,830
So now we will grab the data, so we'll pick up a constant and so that will be an object to her will,

30
00:02:18,830 --> 00:02:19,220
right?

31
00:02:19,640 --> 00:02:24,740
First of all, we want temperature, then we want the humidity.

32
00:02:24,800 --> 00:02:31,490
Remember, these words need to be seen as the words which we do see from learning to play.

33
00:02:32,180 --> 00:02:32,600
All right.

34
00:02:32,900 --> 00:02:41,270
Because when I go, when I go in the browser and I see like temperature, you want the temperature,

35
00:02:41,270 --> 00:02:44,330
we want the humidity and we were under pressure.

36
00:02:44,330 --> 00:02:44,750
All right.

37
00:02:44,900 --> 00:02:47,800
So this is temp pressure and we were doing this.

38
00:02:48,110 --> 00:02:55,910
The like spelling must be seen, OK, temp, humidity and pressure and all this is equal to I mean,

39
00:02:55,910 --> 00:02:58,610
this will be equal to data.

40
00:02:58,850 --> 00:03:00,410
Dark mean.

41
00:03:00,860 --> 00:03:01,400
Excellent.

42
00:03:01,610 --> 00:03:03,890
Now let me show you why I have written data.

43
00:03:03,890 --> 00:03:09,860
Dortmund don't get confused here because data document like data is going to this.

44
00:03:09,870 --> 00:03:12,110
All of this is data.

45
00:03:13,430 --> 00:03:17,480
All of this is data because all of this is in JSON format.

46
00:03:17,930 --> 00:03:23,930
We have converted into JSON by restored Jason and then we have storage and data.

47
00:03:24,680 --> 00:03:27,530
We'll get to all this data inside this.

48
00:03:27,530 --> 00:03:32,810
We want the mean and this mean object inside this mean object.

49
00:03:33,590 --> 00:03:35,090
We want some of the fields.

50
00:03:35,450 --> 00:03:39,110
So that's why I have written restart.

51
00:03:41,130 --> 00:03:47,520
Data like data not mean for data, and it's that the mean object.

52
00:03:47,550 --> 00:03:48,000
All right.

53
00:03:48,390 --> 00:03:52,320
Next, we want the like, how is the weather?

54
00:03:52,320 --> 00:03:57,690
It's cloudy, sunny or whatever it is so that we want to first?

55
00:03:57,690 --> 00:04:00,720
Let me check how that looks like here.

56
00:04:01,440 --> 00:04:05,790
So that is mean that it is the main.

57
00:04:06,940 --> 00:04:17,000
It turned out to mean is the type of girl that maybe it's the this is the mean who know it's it's it's

58
00:04:17,050 --> 00:04:21,550
showing the rain like man is not justified.

59
00:04:22,060 --> 00:04:24,670
You can give it another name too inside whether.

60
00:04:25,620 --> 00:04:26,670
Inside together.

61
00:04:28,040 --> 00:04:36,970
That we have there is an array inside the array, we have an object that we haven't named mean, OK,

62
00:04:36,970 --> 00:04:39,550
so we want to grab this, the value of this mean.

63
00:04:39,790 --> 00:04:40,150
All right.

64
00:04:40,720 --> 00:04:45,430
OK, so I will change the name of this man because I mean, doesn't seem to be like justified.

65
00:04:46,680 --> 00:04:50,190
OK, so cons, same as this.

66
00:04:50,490 --> 00:04:57,150
Now we want to grab them in the mean, but we want to rename it so we can rename it by providing a new

67
00:04:57,150 --> 00:04:57,420
name.

68
00:04:57,780 --> 00:05:03,150
Mean is the original name, but providing the colon and after that, whatever value will provide.

69
00:05:03,150 --> 00:05:07,980
So that will be the new name for this mean or mean class.

70
00:05:08,040 --> 00:05:09,780
OK, so we'll provide.

71
00:05:10,590 --> 00:05:13,380
Maybe we can write another type.

72
00:05:14,280 --> 00:05:15,030
Another type.

73
00:05:17,200 --> 00:05:22,900
Weather type used to be contrite, camel kissing and that type.

74
00:05:23,530 --> 00:05:30,610
And this we want to grab from the, of course, from data and then there was a weather at a remember,

75
00:05:30,820 --> 00:05:34,510
I will show you once again let me describe this first weather.

76
00:05:35,350 --> 00:05:36,270
There was an arrest.

77
00:05:36,310 --> 00:05:38,350
So are we on the first one?

78
00:05:38,350 --> 00:05:39,830
OK, so then we'll proceed over.

79
00:05:40,510 --> 00:05:41,680
But we were on the first one.

80
00:05:42,130 --> 00:05:43,480
OK, let me show you again.

81
00:05:44,050 --> 00:05:48,430
And here you can see that is whether this is an arrest.

82
00:05:48,550 --> 00:05:49,840
You can see this grab bag.

83
00:05:50,050 --> 00:05:57,970
This means an Audi and inside that we want to zero like the first first object of the first object.

84
00:05:58,750 --> 00:06:03,040
OK, so that is the first one and inside that we want the mean.

85
00:06:03,430 --> 00:06:03,850
All right.

86
00:06:04,750 --> 00:06:05,290
OK.

87
00:06:06,560 --> 00:06:07,620
Now next to.

88
00:06:09,050 --> 00:06:12,260
We want the name name of the city.

89
00:06:12,950 --> 00:06:18,200
OK, so name of the city would be in concert and here will provide the name.

90
00:06:18,770 --> 00:06:27,440
Now from where we'll get the name because the name is not under any of the array or object name is here

91
00:06:27,440 --> 00:06:27,720
down.

92
00:06:28,940 --> 00:06:29,570
It's here.

93
00:06:29,910 --> 00:06:30,550
It is not.

94
00:06:30,560 --> 00:06:32,790
It is independent of all its just outside.

95
00:06:32,810 --> 00:06:36,260
So inside the data, only we have to grab the name.

96
00:06:36,650 --> 00:06:37,130
All right.

97
00:06:37,130 --> 00:06:45,200
So we'll just try to name is equal to data, and that's from the data only will grab the name.

98
00:06:45,560 --> 00:06:49,870
Now we want the we want the speed to wind speed.

99
00:06:49,880 --> 00:06:52,970
And now let me first check registering speed.

100
00:06:53,750 --> 00:06:58,430
So let's go to the browser and see you at at the speed that you see us on where speed?

101
00:07:00,260 --> 00:07:01,680
I did not see yet.

102
00:07:02,830 --> 00:07:08,920
So gay speed is here inside the ring object, we see the speed.

103
00:07:09,460 --> 00:07:14,830
OK, then from the window, yeah, when someone will grab the speed.

104
00:07:15,980 --> 00:07:17,360
Beauty is equal to.

105
00:07:19,460 --> 00:07:20,570
Data not.

106
00:07:22,090 --> 00:07:33,320
Of course, then we warned the country, and the point is the sunset times that also we'll check once

107
00:07:33,320 --> 00:07:34,010
in the browser.

108
00:07:34,790 --> 00:07:37,680
We want the country to increase in the face.

109
00:07:37,810 --> 00:07:39,260
OK, inside the system.

110
00:07:39,860 --> 00:07:45,260
But we have the country and we have the sunrise and sunset so you can provide anything.

111
00:07:45,810 --> 00:07:47,420
Here we are using limited things.

112
00:07:47,420 --> 00:07:52,640
You can use many of the things they are like sunrise, sunset.

113
00:07:52,790 --> 00:07:54,620
Many will lose out here so you can provide.

114
00:07:54,620 --> 00:08:00,790
And so we'll be using just sunset from here, who will be using the country name and the sunset.

115
00:08:00,800 --> 00:08:03,200
So we'll use the quiet country and sunset.

116
00:08:03,230 --> 00:08:03,590
OK.

117
00:08:04,190 --> 00:08:10,970
So when we go ahead and when we grab the release, we will ride concert and object.

118
00:08:11,510 --> 00:08:14,260
And he had a will right country.

119
00:08:15,020 --> 00:08:16,250
That is the name of the country.

120
00:08:16,250 --> 00:08:19,130
Then we'll take up this sunset value.

121
00:08:19,790 --> 00:08:20,600
All right.

122
00:08:20,600 --> 00:08:21,260
All right.

123
00:08:21,470 --> 00:08:22,430
So now we will.

124
00:08:23,030 --> 00:08:26,420
There it is present and the RS object.

125
00:08:26,430 --> 00:08:29,090
So Datadog says, All right.

126
00:08:29,300 --> 00:08:36,320
OK, so now that we have a grab all these values, we can just test it out like they are working or

127
00:08:36,320 --> 00:08:36,630
not.

128
00:08:36,650 --> 00:08:42,350
But before that, we need to pass it to our weather details card, right?

129
00:08:43,010 --> 00:08:46,430
Whether it is because that is another component that is not here.

130
00:08:46,430 --> 00:08:49,700
No, we had a we only have the search and search button.

131
00:08:50,120 --> 00:08:54,350
The displaying part is done here in this weather details gorgeous.

132
00:08:54,920 --> 00:08:58,340
So we need to pass the value positive data out here.

133
00:08:59,660 --> 00:09:01,160
So first of all, we'll.

134
00:09:03,210 --> 00:09:10,740
Will create an object that will contain all of this data, so will, first of all, let me create.

135
00:09:12,820 --> 00:09:22,090
Another variable inside the use turtle, so that will be Konst, and it will be named as a weather like

136
00:09:22,120 --> 00:09:27,010
temp in the fall, so we'll just provide.

137
00:09:31,000 --> 00:09:34,090
In full and then we'll provide set.

138
00:09:35,880 --> 00:09:37,780
Then in full.

139
00:09:39,060 --> 00:09:41,280
And that will be U.S.

140
00:09:43,960 --> 00:09:44,560
And.

141
00:09:46,700 --> 00:09:54,440
The value to this will be like an empty object, empty object, because we are creating this is not

142
00:09:54,440 --> 00:09:59,240
just a variable, there's not a like numerical value, something like that on a string.

143
00:09:59,720 --> 00:10:02,900
This is a this is an empty object.

144
00:10:02,930 --> 00:10:03,320
OK.

145
00:10:03,590 --> 00:10:05,220
So end empty object.

146
00:10:05,780 --> 00:10:09,110
This is like temp and floor is an empty object inside.

147
00:10:09,140 --> 00:10:10,860
This will grab all these values.

148
00:10:10,880 --> 00:10:11,210
All right.

149
00:10:11,780 --> 00:10:21,950
So now now what we'll do is we'll fill this empty object like we provided like my.

150
00:10:23,990 --> 00:10:26,900
New weather in info, we can just provide my new.

151
00:10:28,210 --> 00:10:29,080
But the.

152
00:10:32,540 --> 00:10:33,080
In full.

153
00:10:34,840 --> 00:10:38,620
And this is an object.

154
00:10:39,460 --> 00:10:44,170
Don't be confused with that is an object is an object called object.

155
00:10:44,200 --> 00:10:44,530
All right.

156
00:10:45,080 --> 00:10:50,440
So now we want to grab all of this, well, just right, one by one, all of these variables.

157
00:10:51,400 --> 00:10:52,640
All of this class is right.

158
00:10:52,660 --> 00:10:57,250
So for us to really grab the temp, then we'll grab the humidity.

159
00:10:58,830 --> 00:11:04,500
Then we'll grab the pressure, then we'll grab the weather type.

160
00:11:05,670 --> 00:11:11,430
Then we'll grab the name of the city, then we grab the speed of the wind.

161
00:11:12,150 --> 00:11:15,660
Next, we'll take up the country like the name of the country.

162
00:11:15,960 --> 00:11:20,450
And next we take up the sunset time over the sunset.

163
00:11:21,000 --> 00:11:21,900
Let me just save it.

164
00:11:22,470 --> 00:11:25,890
OK, so this is this looks like that.

165
00:11:26,220 --> 00:11:29,670
Also, my cool word is refactored like automatically.

166
00:11:29,820 --> 00:11:33,390
For that, I've installed an extension there that's called prettier.

167
00:11:33,660 --> 00:11:38,640
So you can install that extension and whenever you save your light file.

168
00:11:39,150 --> 00:11:45,930
So after the on save your light cord will be refactored and it will look like little beautiful.

169
00:11:46,680 --> 00:11:47,210
All right.

170
00:11:47,250 --> 00:11:50,550
So the court will be factored into look arranged.

171
00:11:51,030 --> 00:11:54,000
OK, so now that we have a grab these values.

172
00:11:54,480 --> 00:12:00,990
So let us just pass on to pass these values into that function.

173
00:12:02,280 --> 00:12:05,700
So the third stamp in full and.

174
00:12:07,340 --> 00:12:09,140
Will be containing this.

175
00:12:11,000 --> 00:12:18,170
So I object, so my brother in law let go, that's all now this this.

176
00:12:19,380 --> 00:12:26,530
Its object will be filled with all of that values, and all because of your past the bosrd inside that

177
00:12:26,530 --> 00:12:27,080
function.

178
00:12:27,190 --> 00:12:27,640
All right.

179
00:12:28,480 --> 00:12:31,330
So this is the catch for catching another.

180
00:12:31,390 --> 00:12:39,220
So now almost we are done with getting the data, but now we wonder displayed on this feather details

181
00:12:39,700 --> 00:12:42,520
and we want to display their data on the UI part.

182
00:12:42,910 --> 00:12:44,500
So we'll do it in the next spark.

183
00:12:44,500 --> 00:12:45,520
So see in the next one.