Jonas: Let's now finally
use the user input data to create a new item
in our budget controller data structure.
And by doing that, we will learn how to avoid conflicts
in our data structure, and also how and why
to pass data from one module to another.
And we actually already did that,
but in this lecture, it will make even more sense.
So let's now create a public method
right here in the budget controller
that's gonna allow other modules
to add a new item into our data structure.
So, we return an object once again,
which is gonna contain all of our public methods,
which, for now, is only this one, addItem.
So a function with some arguments
that I'm gonna specify right now,
and then our function body.
So, if someone calls this method,
what do they have to tell us
in order that we can create a new item?
First, we would have to know the type,
so if it's an income or an expense.
So, type, and we also need the description, right?
And, of course, the value of the income or of the expense.
And, I'm using different names here
so that we have less confusion.
So, in this method, they have their own names.
So, type, des, and val.
All right, so how would we add, for example, a new expense?
We would simply do it like this:
new Expense,
and then we need an ID.
We would pass the designation
and the value.
Right?
And then we would also store this,
of course, in a new variable.
So let's call that one newItem,
and I'm gonna declare it up here
in the beginning of the method.
So, var
newItem.
Okay.
So, this is in the case
that we are talking about an expense.
So the input here can be an expense or an income.
But what exactly are we going to receive
here in this type argument?
For that, let's take a look at the controller again, okay.
So the input that we're going to receive
in your this input variable,
which will come from the UI controller,
will actually contain this type, right?
So let's go check out this method.
So,
it's here, right?
So one of them will be the type.
And this is the type that we're later
gonna pass into our addItem method.
And, remember, we wrote down here
that it will be either inc, for income,
or exp, for expense.
Okay, and since we know that this is the data
that will be passed into the addItem method,
we know that we can expect either inc or exp,
so we can now use this knowledge here in this function.
So we can say that if
the type
is an exp, so an expense,
then this is what we're gonna do.
So the newItem will be a new expense.
So I was missing the equal operator here, right.
But, if it's not an exp,
so if it's
an income,
so, an inc,
then what we want
is of course to create an income object.
Okay, so, again, if we receive this string here
as a type argument, then we want to create a new expense
using the designation and the value that we pass in,
or, if the type is an income,
then we want to create a new income object
based on the income function constructor
that we have, remember, up here,
also in this budget controller, right?
And so this is how we create our new items.
Now, there's, of course, one missing piece,
which is this ID, but let's leave this one for later.
So for now let me just
say that ID is zero.
And I'm gonna change that later, again.
But for now, let's leave it like this.
And so after we have the new item,
we can then add it to our data structure.
So, remember, all of these new items
will be stored in this data object,
and inside this data object in the allItems object.
And in there, we have two arrays, called exp and inc.
And now, see that these names are the exact same names
that we have here, so, exp and inc,
which is what we receive here from the type.
So this is very, very useful, because now,
we can simply do it like this.
So, data.allItems,
and now, we don't need any if or else statement
to determine in which of the arrays we want to store data.
No, we can just do it like this, type.
Right?
And if we now say push,
and I'm sure that you remember this method,
we can add our newItem at the end of the array.
And that's it.
So let's think about this again.
So we have the type, that is exp or inc,
which comes from here, and these two designations
are the exact same that we have here in our data structure.
And, therefore, we can use these brackets here
to select the array that we want here
from our allItems object.
So if it's exp, for an expense,
then this array here will be selected
from the allItems object, and if it's inc,
then, of course, this array here will be selected.
And then, we can use the push method on it.
And the push method, remember,
simply adds a new element at the end of the array.
Okay, so this is very simple.
And now, all we need to do is to return
that newItem as well.
Because, then, the other module, or the other function,
that's going to call this one, can have direct access
to the item that we just create.
And this will be useful, as you will see in a second.
Now, just one thing that we left for the end,
remember, and that's this ID part here.
And this ID is a little bit tricky.
So, remember, the ID is a unique number
that we want to assign to each new item
that we put either in the expense
or in the income arrays for the allItems, right?
So, how can we determine,
how can we specify this ID for each new item?
The first thing that comes in mind
would be to simply use the length
of the already-existing array, and then add one, right?
So imagine that we had an array with five elements.
So let's say, one, two, three, four, five.
Then it would sound logical to say, okay, the next one
should have an ID of six, right?
So the next ID
equals six.
So this is just a comment, just to show it to you.
So this would be the simple solution.
Now, there is a big problem with this,
and that's because, later on,
we're going to delete items from this.
And so, imagine that instead
of this nicely sorted array here,
we would have IDs like this.
So, for example, one, two,
four, six,
and eight,
something like this.
If we would now go ahead and say
that the next ID should be six, then the problem would be
that we would have two elements with ID of six.
So this is not ideal at all, right?
Because each ID should only exist once.
So, in this case, what should the next ID be?
It should be nine, right?
So next ID should be nine, because that's the number
that comes after the last one.
So let's describe what we want, and then code it.
So we want the ID to be equal
last ID
plus one.
And how do we determine the last ID?
In this case here, the last ID
would be the position number four, right?
Because, zero, one, two, three, four.
And why is it four?
It's four because the length is five,
and since the array is zero-based,
the last one is five minus one.
So, based on that, let's do this.
So, we want to first select the last element,
so, data.allItems,
and then of the type that we're currently using, right?
And I already explained that down here,
why this works this way, right?
And now, we want the last one.
And the last one is simply the length minus one.
So, again, data.allItems,
type,
length,
minus one.
Okay, so, this looks a bit strange, right?
So imagine that the type would inc.
So, in this case, this would be data.allItems[inc].
So, this one here.
So you want to now select the last item.
So we need this here, the brackets with the number in it
so that we can select the last element.
And the number is, as I explained before,
the length of the array minus one.
And so, we need to type all of this again,
and then retrieve the length, and then, minus one.
Okay, so now we have the very last item,
but we only want the ID, right?
So, retrieve the ID like this, okay.
So this is basically the last ID.
So, if the arr array would be this one,
then our last ID would now be eight.
And, remember, the ID that we want is nine,
so, last ID plus one.
So this is the last ID plus one.
And here we have the ID for a new item.
So this is actually already it.
So let's just comment this.
So, create new ID,
then recreate the new item
based on inc
or exp
type,
then push it into our data structure,
and finally, return the new element.
And I actually highly encourage you
to do these kind of comments whenever you can,
so that later your code becomes
more easily for you to understand
when you didn't look at it for some time.
All right, so now this method is ready to be used.
So, let's do that, in newController, of course.
Where else could it be, right?
And we're going to do that right here,
in the ctrlAdd function
So, we already have our input.
So we can now use that input to add the new item.
And for that, we call the addItem method
on the budget controller.
So, budget controller, addItem.
And now, let's remember the data structure that we returned
from the getInput method here.
So it was type, description, and value.
So an object with these three properties.
So this input variable here right now has that object,
so we now say
input.type,
then input.description,
and input.value.
Make sense?
So our addItem method accepts three parameters,
so, three arguments, which are the type,
description, and value, and so, in here,
we pass the three, which come right from our input
that we get from our user interface here with this method.
And now, remember that this addItem method
returns an object, so we have to save it here,
so let's call it newItem here as well.
So, var
newItem,
and let's actually also declare
all the variables here at the top.
So, var input, and newItem.
All right.
So this would now be working just fine.
And remember that this will not be yet displayed
on the user interface, of course,
but it should appear in our data structure.
Now, the data structure is a private variable
in our module, right?
So this data structure here is not visible.
So when we add now something,
then it will be here in our data structure,
but it will not be accessible from the outside.
So let's just quickly add a new method here,
just so we can see it in the console, okay?
So this method is gonna be testing.
Again, this is not for us to use in the application,
but just to test this in the console, okay?
So, function.
And all this does is to console.log
our data structure, okay?
And now, we're ready to test this.
All right, so let's add an income, or, sorry, an expense,
like new car
for $1,500.
And hit OK.
And, all right, so we have a bug here on line 37,
so let's check that one out.
So, line 37, again, and it's here,
in this line, where we create the new ID.
And, let's go back.
It says that it cannot read a property ID of undefined.
Okay, and that makes all the sense,
because right now, we don't have any item
here in our data structure here, okay?
So, of course, here, this length will be zero,
and then zero minus one is minus one,
and there's obviously no minus one in this array.
And so, this ID cannot exist,
because there is no item in the array for that.
So what we have to do here is that,
when the array is empty, then the new ID should be zero.
Okay, so let's do that.
So, if
data.allItems,
and then the array, with our type, again,
so the length of this
should be greater than zero.
And only in this case
this will happen, okay?
And if not,
then the ID should be zero, okay?
So this is for the beginning.
So right now, the allItems array of both income and expense
both have a length of zero,
so the ID will always be zero now.
But then, as soon as we have some element,
then the new ID will be defined based on this.
So, let's see if it works now.
And, again, an expense for a new car,
for 1,500.
And,
all right.
So, nothing happened, because we didn't write a method yet
for displaying this in the user interface,
but let's now use our testing method.
So, testing,
and, okay.
So this is our data structure.
And it has, of course, the allItems object,
and the totals object.
So, exactly what we put in the data structure
in the budget controller.
All right, and here's the expense array,
and there are actually already two,
so I clicked twice on this button here,
and here's our expense, the one that we created
with the expense function constructor.
So, a new car, 1,500, and the ID is zero.
And let's see the other expense,
is also a new car, 1,500, but the ID is one.
Okay, so, this was because I clicked twice
here on the button, so we created two expenses.
But what this shows us is that this is really working.
So let's just add an income as well.
So, project, doesn't really matter, for 2,000.
Hit enter.
And then, let's see uses again.
So the totals there are, of course, still zero,
because we don't have any code for this yet just.
But now, the income also has one element,
and it's this income that we just added.
So, project, with a value of 2,000, and an ID of zero.
And, of course, our two expenses are also still here.
So this is really working now.
So all we need to do now is to actually add this new element
into the user interface.
So let's now do that in the next lecture.