Wonderful.
So now let's iterate over our repost array and let's see which is the most popular language.
Why is it's gonna work is when we have our repos.
Right.
And by the way, as always, you can find that data in the Mogg data and then you look for a mock repost
and you'll notice that we have a giant array and then each and every repoll is a object.
Now, in that object, we have a property on the property.
Name is the language.
So what I'm trying to do is iterate over my repos and how many instances we have a JavaScript.
How many instances we have of CSF.
How many instances we have reached Nirmal or BHB or whatever.
And then since my total is, for example, a hundred, I can calculate which language is the most popular
for that user.
So for example, if the user has created thirty two repos, we a language property with a value of JavaScript,
that means that he or she has thirty two percent on the repost.
With that language.
So hopefully that makes sense.
This is what we're gonna do right now.
Now I'm going to leave this chart data because will reuse it as our dummy data for our following charts.
Because the way I'm going to set that up is exactly the same as with the pie.
So first we'll construct our chart with dummy data.
And then once we have a clear understanding of what we're looking for, then of course, we'll iterate
over.
All right.
So at the moment, I'm just council log.
Posts.
And just to double check, I'm going to navigate to the bigger screen.
Do the.
Not now one.
Sorry.
We're going to do inspect online on the console again.
Bunch of warnings.
Well, we have this array of hundred.
Like I said, each and every repoll is a giant object.
And what I would want to do is iterate over this.
All right.
And then just grab this value for the language property.
And then, of course, count them to see how many reports have the language of JavaScript, how many
have the BHB and all that, and then display that in charge, which is going to signal which is the
most popular language for the user.
More essentially.
Which language the user prefers.
So in order to do that, we are going to get back to a repost component.
And in here, I'm going to use the ridge use method.
So I'm going to come up with a variable name and purposely using Lette and you'll see why.
And we're gonna go with a lot of languages.
All right.
So we have the name for our variable and we're gonna go with a repos reduce.
And if you remember, if we reduce, we passed in the callback function.
And the second thing was what we're trying to return from the you reduce our markers.
I would want to go with an object.
So this is my callback function.
And this is the object that I'm returning.
And then I remember would reduce we had two parameters.
We had a total.
So essentially what we're returning.
So in this case, that reference is the object returning.
The second one was the exact iteration.
So we can name it.
However, we would like course because there are parameters.
So I'm going to name them total and then item.
And now in my function body, I would need to decide what I'm trying to do.
So first, I guess we would log the actual item.
Just so you know that we are accessing the item.
So I'm going to go with console log.
And then we are console logging the item.
But when we're working with the reduced, we do need to make sure that we are returning the total.
Otherwise, this functionality one more.
So I'm going to go with a return total.
And now in the console log, I should see a lot of console logs for each and every time as I'm iterating
over.
And of course, I do so on orders as I'm iterating.
I'm just this playing right now.
Each and every repoll.
So since I know that I can access each and every repond, by the way, I think we can remove the repost
console log.
Now, we don't need it anymore.
Now, in each iteration, I would want to structure the properties out of that object.
So I'm going to go with concept and then a language and I'm going to structure it out of the item.
And just so we all are on the same page nicely, just console log the language and in a console we should
see that.
Of course, we do notice when a console log in the first time jouster evidence says that the amount
three times then against ISIS.
But once in a while we get this now.
So what I would want to do is set up my object where I'm calculating how many instances of the jobs
Crabb's or the CSX of the H, the amale and all that I'm going to have.
But first, I would want to avoid the count.
If the language is now, I know how we can do that.
Well, we could say if and then of course I'm looking for my language, but I'm going to say if the
language is false, if it essentially is now, which is falsely, of course.
So that means that it's going to be evaluating false.
Then I'm just going to return the total meaning.
I'm not going to do anything.
So I'm going to say, if the language here is equal to null, then let's just return total.
So nothing is gonna happen.
So first, we'll see the change that in our console.
We shouldn't see any more notes, because if the language is now, then we're just returning.
We're not console locking anything.
Now, the next thing that I would want is since I know that total is an object, I know that I can set
up these properties dynamically.
Correct.
Because once we have the object in order to set up some kind of dynamic property, I can use these square
brackets and whatever value I'll pass and that property is going to be created.
So, for example, I could pass here random and then set it equal to authority.
And you'll see that for each and every iteration we are creating that property, which of course kind
of doesn't make sense because we're just repeating ourselves.
But if we look here at the bottom, we can see that the object is there.
So that's right.
Now, my total where I have the random property with a value of thirty.
So if we put two and two together, what if we would set up a property with whatever is the value of
the language?
So instead of a random, I'm gonna go with language.
So the only thing what I'm doing right now is I'm changing that instead of hardcoded that value.
I'm and whatever value is in the language, I'm still I'm sending it to 30.
That's fine.
But now in the bottom, I should have all the instances, all my languages.
So, of course, in my case, that is just property assassination.
But if you were happy HP or if you were to have Python and all that, you'd be creating these instances.
So each and every time we have the instance for a JavaScript to our siestas, we're creating that property
dynamically on the object.
So now, of course, we could check whether the property is on the object.
If it is on the object, then we're just gonna add the comp.
However, if it's not on the object, then we're gonna create a new one.
So the new instance, how do we do that?
Well, since we have the total language and all that.
I could also say here if and then total language.
So what I'm saying right now is if the property on the object does not exist.
This is exactly what I'm placing here as this exclamation mark.
So I'm saying if the property does not exist, then I would want to do something.
If it does exist, then I'm going to do something else.
So what we're trying to do here is if it does not exist, then we'll say, yeah, let's create a new
one.
We're gonna go with new language.
And that is going to be equal to one.
Since that is the first instance.
However, if the property is already on the object, well, then I'd want to add to whatever account
I have.
Correct.
So let me move this sucker up.
And that's not what I wanted to do.
We're up here and now we're going to say total language and whatever is the count already.
So we're gonna go total language and then we're going to add plus one.
And now you'll see that we're nicely calculating how many instances we have.
So we have Joska forty.
We have just a 38.
And we have ASTM all 13.
Correct.
Now, here's what I would want to do, though.
I would want to make this a bit more dynamic where remember, for the chart data, we needed to pass
this object.
Correct.
And the properties were very specific where a label was referencing to whatever is going to be the name
Janaka.
There's gonna be either strips here says or HDMI or whatever programming language.
And then the value is, of course, gonna be how many instances.
But hopefully this is clear where I'm saying check the language of the languages and all just returned
from the object.
However, if the language is not null, then I would want to check whether it is already on the object.
If it's not on the object, then I'm saying yes, please create this one instance with this value of
one.
How?
If it is already on the object.
Which of course is going to be for the second instance, third.
Or how many instances after that.
Then just keep the same instance, but add this value.
Now, the changes that I wouldn't want to make is that, of course, I wouldn't want to say with just
as one number, I will keep disvalue.
Don't get me wrong.
But now I would want to save it properly as a object.
So I'm still returning all the same functionality.
It's just gonna be a difference.
How will your formatting of that data and the way we'll do that is total language is gonna be equal
to an object.
And now use are to properties, label and value.
So we're gonna go with a label and that is gonna be equal to my language.
And now the same thing for the value.
I'm gonna go with value is one.
So I'm doing the same thing.
If the language property is not only object, then create a new one.
How are created as an object, created as an object where language is gonna be a label and then value
is gonna be equal to one?
Because that's gonna be my first instance.
And now, of course, we need to do the same thing.
If the language is already on the object.
So what we would want to do then?
Well, then, since I know that it is an object and it already exists, I'm just gonna use a separate
operator where I'm gonna copy all my properties.
Now, of course, when I say all my properties, I have only two.
So once I copy these properties with my spread operator, I can override them.
Correct.
I can say comma and then which property I'd want to override.
Well, I would want overwrite the value one.
Correct.
Because if the language is not there and of course we're creating one.
How.
If it's already there.
Then I would just want to add plus one to that value.
How do we do that.
Well we have our valued property and we'll say, yeah, get me total and then whatever is the property
name, whether she says JavaScript or whatever, and get me that value.
And Pelosse one to that value, so and I'll see that functionality stays the same is just we have formatted
this data to be, she says, and then object where I have the label and where I have go.
So this is gonna be the label for my programming language.
And this is going to be the value.
So this is gonna determine how the pie is going to look like.
Or the label, of course, is going to determine what I'm going to display as my programming language.
Now, once we have this setup, there's two more things that I wouldn't want to do.
First, since some users have enormous amount of languages, I only would want to display five.
So we'll have to turn this into an array.
But also, since I would want to showcase the most popular languages, I would want to sort.
So first, we'll have to turn this back into the right.
So we got our data.
It is in the object.
Man Now we'll have to turn it back into the array.
We'll have to sort.
We'll have to make sure that we're only returning the values that are highest in value in the value
property.
And then let's just take the five first since I don't want to display 10 programming languages.
So let's try it out now.
Total or I'm sorry, languages is my object and how we can turn his back into that.
Right.
Well, remember, JavaScript, we have object dot values.
Let's see what is going to happen.
So I'm going to go with languages is equal to object and then values.
So now I'm just getting the values.
Those are going to be my objects when I pass in the languages.
So now let's see once with console log what is going to be our response.
And it should be an array.
And now in that array, of course, I have three instances.
I have one for JavaScript, one for sissies and one for HMO.
And now I would want to sort them out to make sure that always the value.
Number 45 is going to be the first one.
Then a 38 and then 14.
So make sure that I always display the most popular languages first, because what we're going to do
is we are going to remove some of these languages, meaning we'll make sure that our array only has
the value of, for example, five.
So first, let's iterate over and let's sort it out.
And in order to do that, we can just change dot sort and then four to sort.
We passing the callback function.
And then in that callback function, we just need to decide how we're gonna sort.
Alright.
And when we talk about the parameters, we can name them how I would want.
So I'm gonna go with a B and if I would want to sort where essentially I'm returning the highest value,
first I just need to say return.
And then B and then since this represents the object, I just need to look for my property.
The one that I would want to sort by.
So in my case, that is value.
Some would say B value minus a value.
So now this is just gonna make sure that I always have my highest value language first.
And then, of course, I could use also a slice where I'm gonna get five languages.
Now, of course, you're looking at it and you're like, well, this doesn't make sense.
You only have three and I only have three languages.
I have C assassination email and JavaScript.
But then as I was developing the project, I noticed that some people use like 20 languages.
And really, it just overpopulate the chart, in my opinion.
So if the whole point is to see the most popular one, I think we can just go with five.
And the way we're gonna do that, we're gonna change another method.
And that is going to be a slice, which essentially is just gonna copy part of our array.
And I'm going to say start at index zero and end with index five.
So essentially, I'm just gonna get my first five most popular languages.
And now the only thing left to do is to pass right now this info in to our PI.
So instead of this dummy data char data, we just set it equal to a data and we're looking for the languages
to save it.
And I'll say that, of course.
Now we're going to get a dynamic data.
So now I can see that JavaScript is my most popular one.
It is 46 percent and the value is 45.
So that's how many reports I have with a JavaScript language.
Then I have the CFS for 38.
So 39 percent.
And I have 14 percent of the demo.
So that's how we can iterate over our data and set it into our pie.
Now, let me go through it one more time, because I fully understand that if you haven't worked with
Reduce, it might be a little bit confusing.
Where again, we iterate over.
All right.
We have two things.
We have the total that we are returning to in our case is an object and then each and every item.
Now we are returning a total.
That is very important, otherwise reduce work.
And then we had the structure, the language out of each and every repoll since repo is an object.
Now I check whether that property is now or not.
If it is now, then I just return it.
I don't do anything.
And then, of course, I check whether the object that I'm returning has that property, that dynamic
property of the language.
If it does not have the property, then I create one.
And I set it equal to an object in that object.
I have the label property because that's what the charts are looking for.
And then I set it equal to a language.
And then as far as the value, since it's the first instance since the language property is not there,
I just set it equal to a one.
However, if the language is there, this is why we're using else.
I say, yeah, keep the same property that's there is the same copy, the values that the object currently
has.
That's why we're using separate operator.
However, override the value of property in the value property.
First, get me.
What is the current value?
That's why I'm saying total language and then the value plus one since.
If I'm adding one more instance.
Well, this is what I would want to do.
Just plus one.
And then since I would want to have it as an array, I would need to use object dot values, which is
gonna get me only the values of the object that I pass in the same object languages.
And now, of course, I override that.
And this is equal to my array.
I use the sort method where I always make sure that I sought based on values.
So the language with the highest value is always gonna be first.
And then since I wouldn't want to display ten different languages, I just use a slice method that just
gets me the first five items from my array.
And then of course, eventually we'll just pass it in to the data.
Prop nine, of course, we display it in our chart.