1
00:00:00,210 --> 00:00:00,720
Wonderful.

2
00:00:00,930 --> 00:00:08,190
So now let's iterate over our repost array and let's see which is the most popular language.

3
00:00:08,920 --> 00:00:12,420
Why is it's gonna work is when we have our repos.

4
00:00:12,430 --> 00:00:12,640
Right.

5
00:00:12,720 --> 00:00:19,200
And by the way, as always, you can find that data in the Mogg data and then you look for a mock repost

6
00:00:19,650 --> 00:00:27,450
and you'll notice that we have a giant array and then each and every repoll is a object.

7
00:00:27,840 --> 00:00:31,470
Now, in that object, we have a property on the property.

8
00:00:31,470 --> 00:00:33,480
Name is the language.

9
00:00:34,110 --> 00:00:41,970
So what I'm trying to do is iterate over my repos and how many instances we have a JavaScript.

10
00:00:42,240 --> 00:00:44,070
How many instances we have of CSF.

11
00:00:44,100 --> 00:00:47,700
How many instances we have reached Nirmal or BHB or whatever.

12
00:00:48,150 --> 00:00:56,880
And then since my total is, for example, a hundred, I can calculate which language is the most popular

13
00:00:57,110 --> 00:00:58,050
for that user.

14
00:00:58,440 --> 00:01:06,210
So for example, if the user has created thirty two repos, we a language property with a value of JavaScript,

15
00:01:06,210 --> 00:01:10,560
that means that he or she has thirty two percent on the repost.

16
00:01:10,890 --> 00:01:11,880
With that language.

17
00:01:12,240 --> 00:01:13,530
So hopefully that makes sense.

18
00:01:14,160 --> 00:01:15,660
This is what we're gonna do right now.

19
00:01:15,990 --> 00:01:25,380
Now I'm going to leave this chart data because will reuse it as our dummy data for our following charts.

20
00:01:25,440 --> 00:01:30,090
Because the way I'm going to set that up is exactly the same as with the pie.

21
00:01:30,480 --> 00:01:34,320
So first we'll construct our chart with dummy data.

22
00:01:34,770 --> 00:01:40,440
And then once we have a clear understanding of what we're looking for, then of course, we'll iterate

23
00:01:40,740 --> 00:01:41,100
over.

24
00:01:41,160 --> 00:01:41,550
All right.

25
00:01:41,880 --> 00:01:43,320
So at the moment, I'm just council log.

26
00:01:43,550 --> 00:01:43,850
Posts.

27
00:01:44,280 --> 00:01:46,970
And just to double check, I'm going to navigate to the bigger screen.

28
00:01:48,190 --> 00:01:49,070
Do the.

29
00:01:49,120 --> 00:01:49,780
Not now one.

30
00:01:49,810 --> 00:01:50,180
Sorry.

31
00:01:50,770 --> 00:01:53,540
We're going to do inspect online on the console again.

32
00:01:53,620 --> 00:01:54,280
Bunch of warnings.

33
00:01:54,560 --> 00:01:56,470
Well, we have this array of hundred.

34
00:01:56,770 --> 00:02:01,180
Like I said, each and every repoll is a giant object.

35
00:02:01,540 --> 00:02:05,020
And what I would want to do is iterate over this.

36
00:02:05,110 --> 00:02:05,560
All right.

37
00:02:06,040 --> 00:02:09,900
And then just grab this value for the language property.

38
00:02:10,330 --> 00:02:14,770
And then, of course, count them to see how many reports have the language of JavaScript, how many

39
00:02:14,770 --> 00:02:20,890
have the BHB and all that, and then display that in charge, which is going to signal which is the

40
00:02:20,890 --> 00:02:24,160
most popular language for the user.

41
00:02:24,340 --> 00:02:25,030
More essentially.

42
00:02:25,300 --> 00:02:27,460
Which language the user prefers.

43
00:02:28,150 --> 00:02:33,400
So in order to do that, we are going to get back to a repost component.

44
00:02:33,790 --> 00:02:37,540
And in here, I'm going to use the ridge use method.

45
00:02:37,930 --> 00:02:42,790
So I'm going to come up with a variable name and purposely using Lette and you'll see why.

46
00:02:43,170 --> 00:02:46,180
And we're gonna go with a lot of languages.

47
00:02:47,000 --> 00:02:47,320
All right.

48
00:02:47,340 --> 00:02:54,250
So we have the name for our variable and we're gonna go with a repos reduce.

49
00:02:54,610 --> 00:02:58,480
And if you remember, if we reduce, we passed in the callback function.

50
00:02:58,990 --> 00:03:05,900
And the second thing was what we're trying to return from the you reduce our markers.

51
00:03:06,370 --> 00:03:08,410
I would want to go with an object.

52
00:03:08,830 --> 00:03:10,240
So this is my callback function.

53
00:03:10,670 --> 00:03:13,690
And this is the object that I'm returning.

54
00:03:14,590 --> 00:03:18,700
And then I remember would reduce we had two parameters.

55
00:03:19,090 --> 00:03:20,320
We had a total.

56
00:03:20,620 --> 00:03:22,690
So essentially what we're returning.

57
00:03:22,810 --> 00:03:25,900
So in this case, that reference is the object returning.

58
00:03:26,740 --> 00:03:29,530
The second one was the exact iteration.

59
00:03:29,890 --> 00:03:31,010
So we can name it.

60
00:03:31,210 --> 00:03:33,520
However, we would like course because there are parameters.

61
00:03:33,790 --> 00:03:37,090
So I'm going to name them total and then item.

62
00:03:37,750 --> 00:03:42,400
And now in my function body, I would need to decide what I'm trying to do.

63
00:03:42,760 --> 00:03:47,020
So first, I guess we would log the actual item.

64
00:03:47,140 --> 00:03:49,720
Just so you know that we are accessing the item.

65
00:03:50,020 --> 00:03:51,340
So I'm going to go with console log.

66
00:03:51,700 --> 00:03:53,800
And then we are console logging the item.

67
00:03:54,040 --> 00:03:58,210
But when we're working with the reduced, we do need to make sure that we are returning the total.

68
00:03:58,630 --> 00:04:00,220
Otherwise, this functionality one more.

69
00:04:00,610 --> 00:04:03,030
So I'm going to go with a return total.

70
00:04:03,940 --> 00:04:11,170
And now in the console log, I should see a lot of console logs for each and every time as I'm iterating

71
00:04:11,170 --> 00:04:11,470
over.

72
00:04:11,860 --> 00:04:14,530
And of course, I do so on orders as I'm iterating.

73
00:04:14,830 --> 00:04:17,010
I'm just this playing right now.

74
00:04:17,440 --> 00:04:18,760
Each and every repoll.

75
00:04:19,240 --> 00:04:24,280
So since I know that I can access each and every repond, by the way, I think we can remove the repost

76
00:04:24,280 --> 00:04:24,910
console log.

77
00:04:25,300 --> 00:04:26,470
Now, we don't need it anymore.

78
00:04:26,920 --> 00:04:33,170
Now, in each iteration, I would want to structure the properties out of that object.

79
00:04:33,490 --> 00:04:39,280
So I'm going to go with concept and then a language and I'm going to structure it out of the item.

80
00:04:39,820 --> 00:04:48,790
And just so we all are on the same page nicely, just console log the language and in a console we should

81
00:04:48,790 --> 00:04:49,260
see that.

82
00:04:50,110 --> 00:04:55,960
Of course, we do notice when a console log in the first time jouster evidence says that the amount

83
00:04:55,960 --> 00:04:57,940
three times then against ISIS.

84
00:04:58,360 --> 00:05:00,750
But once in a while we get this now.

85
00:05:01,540 --> 00:05:10,870
So what I would want to do is set up my object where I'm calculating how many instances of the jobs

86
00:05:10,870 --> 00:05:15,160
Crabb's or the CSX of the H, the amale and all that I'm going to have.

87
00:05:15,610 --> 00:05:19,420
But first, I would want to avoid the count.

88
00:05:19,900 --> 00:05:23,320
If the language is now, I know how we can do that.

89
00:05:23,350 --> 00:05:31,000
Well, we could say if and then of course I'm looking for my language, but I'm going to say if the

90
00:05:31,000 --> 00:05:34,720
language is false, if it essentially is now, which is falsely, of course.

91
00:05:35,170 --> 00:05:37,920
So that means that it's going to be evaluating false.

92
00:05:38,260 --> 00:05:40,610
Then I'm just going to return the total meaning.

93
00:05:40,690 --> 00:05:41,620
I'm not going to do anything.

94
00:05:41,980 --> 00:05:47,260
So I'm going to say, if the language here is equal to null, then let's just return total.

95
00:05:47,590 --> 00:05:48,670
So nothing is gonna happen.

96
00:05:48,970 --> 00:05:51,610
So first, we'll see the change that in our console.

97
00:05:51,880 --> 00:05:56,950
We shouldn't see any more notes, because if the language is now, then we're just returning.

98
00:05:57,190 --> 00:05:58,610
We're not console locking anything.

99
00:05:59,140 --> 00:06:06,630
Now, the next thing that I would want is since I know that total is an object, I know that I can set

100
00:06:06,630 --> 00:06:09,160
up these properties dynamically.

101
00:06:09,550 --> 00:06:09,970
Correct.

102
00:06:10,360 --> 00:06:16,540
Because once we have the object in order to set up some kind of dynamic property, I can use these square

103
00:06:16,540 --> 00:06:22,420
brackets and whatever value I'll pass and that property is going to be created.

104
00:06:22,690 --> 00:06:27,940
So, for example, I could pass here random and then set it equal to authority.

105
00:06:28,330 --> 00:06:33,220
And you'll see that for each and every iteration we are creating that property, which of course kind

106
00:06:33,220 --> 00:06:35,920
of doesn't make sense because we're just repeating ourselves.

107
00:06:36,280 --> 00:06:41,350
But if we look here at the bottom, we can see that the object is there.

108
00:06:41,740 --> 00:06:42,400
So that's right.

109
00:06:42,430 --> 00:06:46,810
Now, my total where I have the random property with a value of thirty.

110
00:06:47,540 --> 00:06:55,760
So if we put two and two together, what if we would set up a property with whatever is the value of

111
00:06:55,760 --> 00:06:56,300
the language?

112
00:06:56,630 --> 00:06:59,420
So instead of a random, I'm gonna go with language.

113
00:06:59,690 --> 00:07:05,120
So the only thing what I'm doing right now is I'm changing that instead of hardcoded that value.

114
00:07:05,420 --> 00:07:10,070
I'm and whatever value is in the language, I'm still I'm sending it to 30.

115
00:07:10,250 --> 00:07:10,790
That's fine.

116
00:07:11,060 --> 00:07:15,350
But now in the bottom, I should have all the instances, all my languages.

117
00:07:15,860 --> 00:07:18,240
So, of course, in my case, that is just property assassination.

118
00:07:18,560 --> 00:07:24,260
But if you were happy HP or if you were to have Python and all that, you'd be creating these instances.

119
00:07:24,640 --> 00:07:30,230
So each and every time we have the instance for a JavaScript to our siestas, we're creating that property

120
00:07:30,500 --> 00:07:32,480
dynamically on the object.

121
00:07:33,080 --> 00:07:37,490
So now, of course, we could check whether the property is on the object.

122
00:07:37,940 --> 00:07:40,850
If it is on the object, then we're just gonna add the comp.

123
00:07:41,530 --> 00:07:45,830
However, if it's not on the object, then we're gonna create a new one.

124
00:07:46,070 --> 00:07:48,230
So the new instance, how do we do that?

125
00:07:48,300 --> 00:07:51,560
Well, since we have the total language and all that.

126
00:07:51,710 --> 00:07:55,550
I could also say here if and then total language.

127
00:07:55,970 --> 00:08:01,850
So what I'm saying right now is if the property on the object does not exist.

128
00:08:02,240 --> 00:08:05,090
This is exactly what I'm placing here as this exclamation mark.

129
00:08:05,510 --> 00:08:10,400
So I'm saying if the property does not exist, then I would want to do something.

130
00:08:11,030 --> 00:08:13,130
If it does exist, then I'm going to do something else.

131
00:08:13,580 --> 00:08:18,740
So what we're trying to do here is if it does not exist, then we'll say, yeah, let's create a new

132
00:08:18,740 --> 00:08:19,070
one.

133
00:08:19,550 --> 00:08:21,020
We're gonna go with new language.

134
00:08:21,280 --> 00:08:22,490
And that is going to be equal to one.

135
00:08:23,060 --> 00:08:24,260
Since that is the first instance.

136
00:08:24,290 --> 00:08:31,880
However, if the property is already on the object, well, then I'd want to add to whatever account

137
00:08:31,880 --> 00:08:32,220
I have.

138
00:08:32,240 --> 00:08:32,630
Correct.

139
00:08:33,050 --> 00:08:34,610
So let me move this sucker up.

140
00:08:35,540 --> 00:08:37,100
And that's not what I wanted to do.

141
00:08:37,700 --> 00:08:43,090
We're up here and now we're going to say total language and whatever is the count already.

142
00:08:43,580 --> 00:08:48,500
So we're gonna go total language and then we're going to add plus one.

143
00:08:48,850 --> 00:08:52,940
And now you'll see that we're nicely calculating how many instances we have.

144
00:08:53,330 --> 00:08:54,740
So we have Joska forty.

145
00:08:55,010 --> 00:08:56,540
We have just a 38.

146
00:08:56,900 --> 00:08:59,110
And we have ASTM all 13.

147
00:08:59,930 --> 00:09:00,290
Correct.

148
00:09:00,830 --> 00:09:02,540
Now, here's what I would want to do, though.

149
00:09:02,900 --> 00:09:09,500
I would want to make this a bit more dynamic where remember, for the chart data, we needed to pass

150
00:09:09,530 --> 00:09:10,610
this object.

151
00:09:10,670 --> 00:09:11,050
Correct.

152
00:09:11,230 --> 00:09:18,290
And the properties were very specific where a label was referencing to whatever is going to be the name

153
00:09:18,540 --> 00:09:18,940
Janaka.

154
00:09:19,150 --> 00:09:22,990
There's gonna be either strips here says or HDMI or whatever programming language.

155
00:09:23,600 --> 00:09:27,230
And then the value is, of course, gonna be how many instances.

156
00:09:27,620 --> 00:09:33,760
But hopefully this is clear where I'm saying check the language of the languages and all just returned

157
00:09:33,760 --> 00:09:34,370
from the object.

158
00:09:34,750 --> 00:09:42,200
However, if the language is not null, then I would want to check whether it is already on the object.

159
00:09:42,830 --> 00:09:48,920
If it's not on the object, then I'm saying yes, please create this one instance with this value of

160
00:09:48,920 --> 00:09:49,160
one.

161
00:09:49,520 --> 00:09:49,880
How?

162
00:09:49,970 --> 00:09:51,570
If it is already on the object.

163
00:09:51,620 --> 00:09:54,350
Which of course is going to be for the second instance, third.

164
00:09:54,350 --> 00:09:56,480
Or how many instances after that.

165
00:09:56,930 --> 00:10:01,130
Then just keep the same instance, but add this value.

166
00:10:01,520 --> 00:10:06,350
Now, the changes that I wouldn't want to make is that, of course, I wouldn't want to say with just

167
00:10:06,410 --> 00:10:09,010
as one number, I will keep disvalue.

168
00:10:09,070 --> 00:10:09,800
Don't get me wrong.

169
00:10:09,830 --> 00:10:13,760
But now I would want to save it properly as a object.

170
00:10:14,120 --> 00:10:16,910
So I'm still returning all the same functionality.

171
00:10:17,230 --> 00:10:18,320
It's just gonna be a difference.

172
00:10:18,650 --> 00:10:24,530
How will your formatting of that data and the way we'll do that is total language is gonna be equal

173
00:10:24,530 --> 00:10:25,170
to an object.

174
00:10:25,620 --> 00:10:28,490
And now use are to properties, label and value.

175
00:10:28,820 --> 00:10:33,170
So we're gonna go with a label and that is gonna be equal to my language.

176
00:10:33,470 --> 00:10:34,880
And now the same thing for the value.

177
00:10:35,030 --> 00:10:36,490
I'm gonna go with value is one.

178
00:10:36,890 --> 00:10:37,940
So I'm doing the same thing.

179
00:10:38,540 --> 00:10:43,550
If the language property is not only object, then create a new one.

180
00:10:43,550 --> 00:10:50,180
How are created as an object, created as an object where language is gonna be a label and then value

181
00:10:50,570 --> 00:10:51,830
is gonna be equal to one?

182
00:10:52,100 --> 00:10:53,510
Because that's gonna be my first instance.

183
00:10:53,960 --> 00:10:55,640
And now, of course, we need to do the same thing.

184
00:10:56,030 --> 00:10:58,340
If the language is already on the object.

185
00:10:58,610 --> 00:10:59,900
So what we would want to do then?

186
00:11:00,320 --> 00:11:06,980
Well, then, since I know that it is an object and it already exists, I'm just gonna use a separate

187
00:11:06,980 --> 00:11:10,130
operator where I'm gonna copy all my properties.

188
00:11:10,310 --> 00:11:12,680
Now, of course, when I say all my properties, I have only two.

189
00:11:13,730 --> 00:11:18,840
So once I copy these properties with my spread operator, I can override them.

190
00:11:18,860 --> 00:11:19,250
Correct.

191
00:11:19,610 --> 00:11:23,150
I can say comma and then which property I'd want to override.

192
00:11:23,540 --> 00:11:25,640
Well, I would want overwrite the value one.

193
00:11:25,650 --> 00:11:26,060
Correct.

194
00:11:26,390 --> 00:11:29,630
Because if the language is not there and of course we're creating one.

195
00:11:29,960 --> 00:11:30,260
How.

196
00:11:30,350 --> 00:11:31,340
If it's already there.

197
00:11:31,730 --> 00:11:35,330
Then I would just want to add plus one to that value.

198
00:11:35,720 --> 00:11:36,390
How do we do that.

199
00:11:36,440 --> 00:11:43,040
Well we have our valued property and we'll say, yeah, get me total and then whatever is the property

200
00:11:43,040 --> 00:11:46,640
name, whether she says JavaScript or whatever, and get me that value.

201
00:11:47,260 --> 00:11:55,240
And Pelosse one to that value, so and I'll see that functionality stays the same is just we have formatted

202
00:11:55,240 --> 00:12:01,110
this data to be, she says, and then object where I have the label and where I have go.

203
00:12:01,810 --> 00:12:04,660
So this is gonna be the label for my programming language.

204
00:12:04,990 --> 00:12:06,280
And this is going to be the value.

205
00:12:06,610 --> 00:12:09,520
So this is gonna determine how the pie is going to look like.

206
00:12:09,570 --> 00:12:15,850
Or the label, of course, is going to determine what I'm going to display as my programming language.

207
00:12:16,330 --> 00:12:19,990
Now, once we have this setup, there's two more things that I wouldn't want to do.

208
00:12:20,470 --> 00:12:26,920
First, since some users have enormous amount of languages, I only would want to display five.

209
00:12:27,250 --> 00:12:30,160
So we'll have to turn this into an array.

210
00:12:30,550 --> 00:12:37,300
But also, since I would want to showcase the most popular languages, I would want to sort.

211
00:12:37,690 --> 00:12:40,090
So first, we'll have to turn this back into the right.

212
00:12:40,330 --> 00:12:41,380
So we got our data.

213
00:12:41,650 --> 00:12:42,510
It is in the object.

214
00:12:42,540 --> 00:12:45,220
Man Now we'll have to turn it back into the array.

215
00:12:45,580 --> 00:12:46,620
We'll have to sort.

216
00:12:46,960 --> 00:12:52,570
We'll have to make sure that we're only returning the values that are highest in value in the value

217
00:12:52,600 --> 00:12:53,010
property.

218
00:12:53,470 --> 00:13:00,120
And then let's just take the five first since I don't want to display 10 programming languages.

219
00:13:00,520 --> 00:13:02,010
So let's try it out now.

220
00:13:02,260 --> 00:13:07,650
Total or I'm sorry, languages is my object and how we can turn his back into that.

221
00:13:07,650 --> 00:13:07,870
Right.

222
00:13:08,440 --> 00:13:12,430
Well, remember, JavaScript, we have object dot values.

223
00:13:13,210 --> 00:13:14,350
Let's see what is going to happen.

224
00:13:14,380 --> 00:13:20,230
So I'm going to go with languages is equal to object and then values.

225
00:13:20,260 --> 00:13:21,670
So now I'm just getting the values.

226
00:13:21,700 --> 00:13:25,150
Those are going to be my objects when I pass in the languages.

227
00:13:25,540 --> 00:13:30,220
So now let's see once with console log what is going to be our response.

228
00:13:30,950 --> 00:13:32,500
And it should be an array.

229
00:13:32,980 --> 00:13:36,310
And now in that array, of course, I have three instances.

230
00:13:36,730 --> 00:13:40,700
I have one for JavaScript, one for sissies and one for HMO.

231
00:13:41,320 --> 00:13:46,940
And now I would want to sort them out to make sure that always the value.

232
00:13:46,990 --> 00:13:49,030
Number 45 is going to be the first one.

233
00:13:49,450 --> 00:13:51,160
Then a 38 and then 14.

234
00:13:51,490 --> 00:13:58,600
So make sure that I always display the most popular languages first, because what we're going to do

235
00:13:59,020 --> 00:14:07,450
is we are going to remove some of these languages, meaning we'll make sure that our array only has

236
00:14:07,720 --> 00:14:09,910
the value of, for example, five.

237
00:14:10,300 --> 00:14:13,850
So first, let's iterate over and let's sort it out.

238
00:14:14,060 --> 00:14:19,070
And in order to do that, we can just change dot sort and then four to sort.

239
00:14:19,150 --> 00:14:20,680
We passing the callback function.

240
00:14:21,070 --> 00:14:24,970
And then in that callback function, we just need to decide how we're gonna sort.

241
00:14:25,120 --> 00:14:25,460
Alright.

242
00:14:26,020 --> 00:14:28,930
And when we talk about the parameters, we can name them how I would want.

243
00:14:28,940 --> 00:14:36,580
So I'm gonna go with a B and if I would want to sort where essentially I'm returning the highest value,

244
00:14:36,580 --> 00:14:39,010
first I just need to say return.

245
00:14:39,460 --> 00:14:44,320
And then B and then since this represents the object, I just need to look for my property.

246
00:14:44,650 --> 00:14:46,390
The one that I would want to sort by.

247
00:14:46,390 --> 00:14:47,680
So in my case, that is value.

248
00:14:48,070 --> 00:14:51,670
Some would say B value minus a value.

249
00:14:52,060 --> 00:14:58,570
So now this is just gonna make sure that I always have my highest value language first.

250
00:14:59,050 --> 00:15:03,880
And then, of course, I could use also a slice where I'm gonna get five languages.

251
00:15:03,910 --> 00:15:07,090
Now, of course, you're looking at it and you're like, well, this doesn't make sense.

252
00:15:07,120 --> 00:15:09,910
You only have three and I only have three languages.

253
00:15:09,940 --> 00:15:11,580
I have C assassination email and JavaScript.

254
00:15:11,980 --> 00:15:16,570
But then as I was developing the project, I noticed that some people use like 20 languages.

255
00:15:16,930 --> 00:15:20,470
And really, it just overpopulate the chart, in my opinion.

256
00:15:20,770 --> 00:15:25,360
So if the whole point is to see the most popular one, I think we can just go with five.

257
00:15:25,810 --> 00:15:28,090
And the way we're gonna do that, we're gonna change another method.

258
00:15:28,390 --> 00:15:33,180
And that is going to be a slice, which essentially is just gonna copy part of our array.

259
00:15:33,570 --> 00:15:38,230
And I'm going to say start at index zero and end with index five.

260
00:15:38,680 --> 00:15:43,420
So essentially, I'm just gonna get my first five most popular languages.

261
00:15:43,930 --> 00:15:50,150
And now the only thing left to do is to pass right now this info in to our PI.

262
00:15:50,560 --> 00:15:58,840
So instead of this dummy data char data, we just set it equal to a data and we're looking for the languages

263
00:15:59,110 --> 00:15:59,950
to save it.

264
00:16:00,310 --> 00:16:01,480
And I'll say that, of course.

265
00:16:01,570 --> 00:16:04,180
Now we're going to get a dynamic data.

266
00:16:04,530 --> 00:16:07,570
So now I can see that JavaScript is my most popular one.

267
00:16:07,900 --> 00:16:10,890
It is 46 percent and the value is 45.

268
00:16:11,350 --> 00:16:16,000
So that's how many reports I have with a JavaScript language.

269
00:16:16,360 --> 00:16:18,820
Then I have the CFS for 38.

270
00:16:19,150 --> 00:16:20,160
So 39 percent.

271
00:16:20,590 --> 00:16:24,040
And I have 14 percent of the demo.

272
00:16:24,460 --> 00:16:28,600
So that's how we can iterate over our data and set it into our pie.

273
00:16:29,050 --> 00:16:33,850
Now, let me go through it one more time, because I fully understand that if you haven't worked with

274
00:16:33,850 --> 00:16:35,770
Reduce, it might be a little bit confusing.

275
00:16:36,160 --> 00:16:37,510
Where again, we iterate over.

276
00:16:37,510 --> 00:16:37,870
All right.

277
00:16:38,290 --> 00:16:39,370
We have two things.

278
00:16:39,370 --> 00:16:43,960
We have the total that we are returning to in our case is an object and then each and every item.

279
00:16:44,500 --> 00:16:46,960
Now we are returning a total.

280
00:16:47,230 --> 00:16:49,630
That is very important, otherwise reduce work.

281
00:16:50,140 --> 00:16:56,680
And then we had the structure, the language out of each and every repoll since repo is an object.

282
00:16:57,070 --> 00:17:00,370
Now I check whether that property is now or not.

283
00:17:00,520 --> 00:17:02,560
If it is now, then I just return it.

284
00:17:02,620 --> 00:17:03,460
I don't do anything.

285
00:17:03,940 --> 00:17:10,030
And then, of course, I check whether the object that I'm returning has that property, that dynamic

286
00:17:10,030 --> 00:17:11,390
property of the language.

287
00:17:12,010 --> 00:17:15,730
If it does not have the property, then I create one.

288
00:17:16,070 --> 00:17:18,820
And I set it equal to an object in that object.

289
00:17:18,850 --> 00:17:21,850
I have the label property because that's what the charts are looking for.

290
00:17:22,390 --> 00:17:24,190
And then I set it equal to a language.

291
00:17:24,580 --> 00:17:29,440
And then as far as the value, since it's the first instance since the language property is not there,

292
00:17:29,830 --> 00:17:31,360
I just set it equal to a one.

293
00:17:31,570 --> 00:17:35,550
However, if the language is there, this is why we're using else.

294
00:17:36,010 --> 00:17:42,310
I say, yeah, keep the same property that's there is the same copy, the values that the object currently

295
00:17:42,310 --> 00:17:42,580
has.

296
00:17:42,610 --> 00:17:44,170
That's why we're using separate operator.

297
00:17:44,300 --> 00:17:49,190
However, override the value of property in the value property.

298
00:17:49,390 --> 00:17:50,570
First, get me.

299
00:17:50,590 --> 00:17:51,880
What is the current value?

300
00:17:52,000 --> 00:17:55,470
That's why I'm saying total language and then the value plus one since.

301
00:17:55,690 --> 00:17:57,100
If I'm adding one more instance.

302
00:17:57,130 --> 00:17:58,600
Well, this is what I would want to do.

303
00:17:58,870 --> 00:17:59,710
Just plus one.

304
00:18:00,220 --> 00:18:06,730
And then since I would want to have it as an array, I would need to use object dot values, which is

305
00:18:06,730 --> 00:18:11,590
gonna get me only the values of the object that I pass in the same object languages.

306
00:18:12,080 --> 00:18:13,750
And now, of course, I override that.

307
00:18:13,810 --> 00:18:15,930
And this is equal to my array.

308
00:18:16,420 --> 00:18:22,690
I use the sort method where I always make sure that I sought based on values.

309
00:18:22,990 --> 00:18:26,470
So the language with the highest value is always gonna be first.

310
00:18:26,800 --> 00:18:32,650
And then since I wouldn't want to display ten different languages, I just use a slice method that just

311
00:18:32,650 --> 00:18:35,830
gets me the first five items from my array.

312
00:18:36,220 --> 00:18:40,150
And then of course, eventually we'll just pass it in to the data.

313
00:18:40,150 --> 00:18:43,300
Prop nine, of course, we display it in our chart.