Instructor: Let's now create the methods
that will do the actual calculations
of the expense percentages.
And so, in this lecture, you'll learn
how to make the budget controller interact
with our Expense prototype.
So let's start by adding a new method
to our budget controller, and it's gonna be
another public method.
So calculateBudget, getBudget,
and so I'm gonna put the calculate methods,
basically, here together, okay?
So we have calculateBudget and now,
calculatePercentages.
Okay, so let's think about this.
So basically, we need to calculate the expense percentage
for each of the expense objects
that are stored in the expenses array, right?
So imagine that we had three expenses,
and I'm gonna write them here as an example.
So imagine we had a,
20, then expense b of 10,
and then another expense, let's call it c, of 40, okay?
So just an example, and our total income would be 100.
So what would the percentages for each of these be?
So for a,
we would have 20 divided by 100, right?
So this makes 20%.
So with expense a, this means that we spend 20%
of our total income.
And then of course, in the same way,
b would be 10 divided by 100.
That would be 10%,
and c would be 40%, right?
So this is just so that we know
how to calculate each of these percentages.
So this means that we're always gonna need
this total income here.
Now, we said that we need to do this
for each object individually,
and so this sounds like there should be a method
on each of these expense objects
that calculates this percentage, right?
And so, let's actually do that.
So let's go to our expense function constructor here.
So in here, and we want to add a method.
So how do we do that?
And I'm absolutely sure that you remember this.
So we're not just going to add the method
right here into the function constructor, right?
But instead, we're going to add it to its prototype
because like this, all of the objects
that are created through this expense prototype
will then inherit this method,
because of the prototype chain, right?
Because it's in their prototype,
so the prototype property of expense.
So let me do that.
We did this before a lot of times,
so we already know how to do this.
So Expense.prototype,
and let's call this method the calculate percentage,
or just calcPercentage.
Okay, and so, and we already know
that we always need something in order
to be able to calculate the percentage
of one of the expenses, right?
And we just talked about that,
and that is the total income.
So totalIncome.
Okay, so now we can calculate our actual percentage,
but first, where are we gonna store this percentage?
We should actually create a new property
here in the expense object, right?
So let's do that.
So this.percentage, and in the beginning,
before it's defined, I'm gonna set it to -1,
such as we did somewhere else in our code before, right?
So when something is not defined, we use -1,
and so now, here in this method,
we can then define this property to something meaningful,
so this.percentage will be the value of this expense, right?
So the value divided by the totalIncome,
which is the argument that we receive as an input here.
Now such as we did before, in another function,
we will multiply this by 100, and then also round it,
so again, we're using the Math object,
and then round,
and with this, we have an integer percentage value.
So we did this before in this way.
Let's remember it.
So yeah, it was here.
So when we calculated the budget,
we also calculated the, let's say, global percentage,
and so, we also divided the expense by the income,
multiplied it with 100, and then rounded it.
And something else that we did here
was to only calculate this when the income
was actually greater than zero here, right?
And that's because we cannot divide anything by zero.
So we should do the same in our method
that we're writing right now, so in here,
I'm gonna do the same thing, so...
If the totalIncome is greater than zero,
and only then, we calculate this percentage like this,
and if it's zero, then the percentage will just be -1 again.
All right, and that's it.
So this method calculates the percentage,
and since we always have a get method,
so for example, a getBudget and a getPercentage,
which we're gonna write in a second,
I will also create a getPercentage method
for this Expense object, or function constructor,
so Expense.prototype.getPercentage,
and this, of course,
will be the simplest function ever, right?
Because it's just going to retrieve the percentage
from the object and then return it,
but this again is so that we have different functions
which each one only has one specific task.
So this one calculates it,
and then this one returns it.
Okay, so let's now use this method actually.
So this is the one that we were working on here,
so the calculatePercentages method,
and now, we can call the method that we just wrote
for each of the elements in the array
in our data structure, right?
So for all of the expense objects
that are stored here in this data structure, okay?
And do you remember the new method
that we learned to loop over arrays?
Yes, it was the forEach method.
So let's use it now again.
So we first need an array, so we're gonna retrieve it
from our data structure.
So data.allItems, and in this case,
we only want the expense array, right?
And now in here, we can call the forEach method
because this is an array.
And now, our callback function.
So this specifies exactly what we want to happen
for each of the elements.
So we have access to the current variable here, right?
I'm just gonna call it cur in this case.
And what I want to happen to each of the elements
is to simply call the calcPercentage method.
So I write current and then calcPercentage,
which is the method that we coded before.
And that's it.
So this is gonna calculate the percentage
for each and every expense that we have in our object.
And now, we just need the getPercentages.
So, getPercentages,
and some space here as well, and all right.
And this one will actually be a bit similar
because we once again need to loop over all of our expenses,
and that's because we want to call the getPercentage method
on each of our objects.
The difference to the loop that we wrote here
in our other method is that this time,
we don't wanna just loop over the array and do something.
No, we also want to return something.
So we want to store it somewhere.
And remember, that's what the map method is for.
So instead of forEach, we're gonna use map.
So var allPercentages, let's say,
is data.allItems.exp,
so the expenses, and then, I use map
'cause remember, map returns something
and stores it in a variable while forEAch does not.
And now, our callback function again.
And now, in here, in the callback function
of the map method, we usually just return something,
and what we return here is what is then stored here
in this variable.
So we just return the result
of calling the getPercentage method.
And in the end, all we need to do is then to return
the allPerc variable, which is, of course,
an array with all of the percentages.
So again, imagine we had five objects
in our array here, in our expenses array,
so then this here would get called five times, right?
So for each of the five elements.
So for each of them, we would call the getPercentage method,
return it, and then store it
here in the allPercentages array,
and then in the end, we just return it.
All right, and so with these three methods,
we calculate the percentage on each individual object
and we then return an array
with all of these percentages in it.
So let's now use these methods that we just coded
here in our controller.
And remember, we created this updatePercentages function
in the last lecture, and in here,
we will now say budgetCtrl.calculatePercentages,
and then we just say that we want to get the percentages.
And of course, we need to store this somewhere, right?
So var percentages, and now,
since we can't see anything on the user interface just yet,
I'm gonna log it to the console.
So console.log(percentages).
All right.
So it's time to test this.
And I'm going to use the example that we had before.
So project, 100 is our income,
and the three expenses are going to be a of 20,
and now, we have some kind of bug here.
Okay, so let's go to line 135.
Okay.
135.
And okay, so of course, that's a problem
because we used current here,
but the parameter name is cur, right?
So just like this.
So it's completely normal that we sometimes have some bugs,
that we do this kind of mistakes,
and everyone does this so it's really no big deal.
So let's try this again.
So I'm just calling it inc here.
And then our three expenses.
So a is 20.
And now we see -1 here in the console,
which is weird, right?
So let's see why that happened.
So the percentage can only be -1
if the income is zero, right?
But the income is not actually zero
so let's see what we did wrong.
So the calculatePercentage method here,
and so, here's the problem.
So we called the calcPercentage method
and didn't pass the totals into it,
which we should have, so let's do that now.
And we already know where that is stored,
so data.totals, right?
And then inc.
So let me show it to you just to remember.
So it's this value here.
So the total income is stored right here,
and hopefully, now it's the third time
and now it's going to work.
So income, 100,
and let's add an expense of 10.
Sorry, a is 10,
and yes, so 10 is 10%.
Actually, let's try it with an income of 200,
and then have a equal 10,
and now it's gonna be 5%, right?
And yes, here it is.
Now b, let's say, 50, and this should be 25%, right?
And yes, so now we have five and 25.
So these are the percentages
that we're later gonna display here.
So it will be five here, and then 25,
and if we now add another one like c,
which is gonna be 40, and this one is, of course, 20%,
so five, 25, and 20,
and these are percentages that we're going to put here,
right, in a next lecture.