Narrator: Let's now create
a new method in our budget controller
so that we can delete an item from our data structure.
And so in this lecture,
you are gonna learn yet another method
to loop over an array (which is called map),
and you'll learn how to remove elements
from an array using the splice method.
So let's do that.
So, here's our budget controller
in which we will add yet another public method.
So let's actually put it here after the at item
we will have the method to delete an item.
So, delete item a function,
and to this is our method.
Now, we know that this method is going to be called
by the budget controller, right?
So, what kind of information do we need to have
in order to be able to delete
an item from the data structure?
So what parameters, what arguments,
does the app controller have to pass into this method?
So let's look at our data structure.
So here it is, and we know that in these arrays
we will have all of our expense objects
and all of our income objects, okay?
And both expense and income objects,
they are both identified by their unique ID, right?
So, what we need in order to
delete one of the items from these arrays
is we first need to know
if we're talkin' about an expense or an income,
and then we also need the unique ID.
So this is what the controller
will have to pass into this function.
And so we need to set up the parameters here.
So the type, which is the way we've been calling it, and ID.
All right.
Now, imagine that we pass an ID of,
let's say, three into this function.
So, three.
We cannot simply select
the element that we wanna delete, like this.
So, data dot all items,
type,
and then just use the ID here, right?
So we cannot do it like this.
So this would select our array here, right?
So, for example, the expense array,
and then select the element number three using this, right?
Now, this would work if we were certain
that the IDs are all in order like
zero, one, two, three, four, five.
But we know that it's not the case
and we already talked about that
when we wrote this method here, right?
So we had this example here,
so imagine these are the IDs,
and so let's actually copy this example.
So imagine these were the IDs.
If you would then select the element number three,
so zero, one, two, three
and would then delete it,
you would not delete the element
with the ID of three, but with the ID of six, right?
So this is not what we want.
And again, the reason for the fact
that these are not all in order
like one, two, three, four, five and so on and so forth
is the fact that we can delete items.
And so in this case, for example,
the elements with the ID
zero and three and five and seven were all deleted,
and that's why they're not here anymore in this example.
And so we need to take that into account
when we write this method.
So what can we do now?
The solution here is to create an array
with all of the ID numbers that we have
and then find out what the index of our input ID is.
So basically, the index of the element
that we want to remove.
So let's say that the ID that we want to remove is six,
for example, right?
Then the index is not simply six
as we already discussed,
but instead it's zero, one, two, three.
So the index in this case would be three.
So we need a way to find out why it's three,
so why it's the number three that we need to delete.
So again, the solution is to create an array
with all the ID numbers that we have.
So let's comment this part out, as well
because none of that is what we're gonna do.
Instead, what we're gonna do
is to loop over all of the elements
in an incomes or an expenses array.
So, data dot all items
and then the type that we pass in
and now let's meet a new method, here.
So before, we used the for each method, right?
But there is another one
which is very similar called map, okay?
And map also receives a function,
a callback function,
which also has access to the current element,
the current index,
and the entire array, okay?
But the difference between map and for each
is that map actually returns a brand new array.
So in here, so in this function, in this callback function
that is called for each element
we will always return something
and this will then be stored in a new array.
So let's say return two, simply.
If we now say var IDs,
then we would end up with a brand new array
with the same length as the all items type array.
But with the number two in all of the elements.
So this, of course, wouldn't be so useful
because what we want is not a two in all of them,
but what we want is the current ID.
Okay?
So going back to our example before,
imagine that in the all items type,
we had five income objects which had these IDs.
So, so one, two, four, six and eight.
So after executing this map method,
we would end up with exactly this array, okay?
So let's actually call it IDs, okay?
So that we keep this as an example.
And now, all we need to do is to find that index.
And we already know how to do that, right?
So we say index
is
IDs dot index of
the ID that we pass into the method.
And it's really as simple as that.
So let's now declare these,
so IDs and index.
All right.
So remember, this index of method
returns the index number of the element
of the array that we input here.
So again, imagine that the ID would be six
then the index would be zero, one, two, three.
Because this is the six that we're searching.
And so, this index variable here would become three.
So, index equals three.
And now, all we need to do is to
actually delete this item from the array, right?
Okay.
And remember that this index here
can be minus one in case that this item here
is not found in the array in which we're searching.
So we only want to remove something
if the index actually exists, right?
So if the index is different from minus one
because minus one is when it didn't find the element.
So if the index
is different from minus one
then we want to delete.
And now, in order to delete,
we're going to need yet another method of the array.
And this one is called splice.
So don't confuse it with the slice method
that we used before.
This one is called splice.
And this one is used to remove elements,
while the slice element is only used to create a copy.
And so, let's see how to use that.
So data dot all items,
type,
and this is the array of our objects, right?
So on this array, we now can use the splice method.
And it works like this:
so the first argument is to position number
at which we want to start deleting.
And this is of course the index.
And then the second argument is
the number of elements that we want to delete.
And we, of course, only want to delete one.
So again, this will start removing elements
at the number index which,
if we come back to our example,
is number three.
So at number three, it will remove exactly one.
So in our case, it will be zero, one, two, three,
and then this one would get removed like this, okay?
Okay, so I hope that this small example here
actually helped you understand
why we needed to do it this way
instead of just writing out this piece of code here.
Instead, we had to create this entire array here,
and then retrieve the index of the element
that we want to remove.
So this one was a bit tricky, but we still solved it, right?
And you also learned yet another two methods
for arrays by writing this method.
So I hope that you somewhere keep track
of all these methods that we have already used on arrays,
so that you don't lose sight of all
the amazing things that we can do with arrays.
And now, the last step is to just use this method
in the controller.
So, where is our method for that-
or function, actually, for that...
It's here.
So the control the lead item function.
And so we say
budget controller, delete item.
And now is the time where we can finally
use this type and this ID
that we created in the last lecture.
Remember that?
So we can now simply pass in the type
which is what our method expects,
and the ID as well.
And like this, the element,
with the specified ID and the specified type
will be deleted from our data structure.
So let's now see this in action, okay?
So, reload.
All right, we have a back here somewhere,
so in line 82, let's take that out.
Line 82, all the way up here.
Okay, we have one equal too much, okay?
So the equal operator is with three equals
and the difference operator is with this exclamation mark
and the two equal signs.
Okay, so again, and now the application has started.
So let's add something to here.
Let's say test one,
$10.
Test two, let's say 20.
And test three,
30.
All right.
Now remember, if we click here to delete this
nothing will happen on the user interface.
So we actually need to see our data structure,
and we have our nice, handy testing method
here for that, right?
So here's the object that we created with all the items
which are these three incomes.
So, three income objects
with 10, 20 and 30 dollars.
So let's now remove the second one.
All right?
And, we have a back.
So yet another one.
So let's go to line 282.
And 282 is down here.
Okay, so this was a stupid mistake.
It's of course ID with the capital letters
and not like it was before.
So I hope now it's gonna work.
So test one,
test two,
and test three.
And now, let's delete this.
All right, so I clicked the button
and again, it wasn't removed from here,
but let's take a look at our data structure.
So our testing method...
And now, if you look at here,
oh, we still have three.
So there's clearly still something wrong here.
And since there's nothing happening here,
so nothing happens when we hit these buttons here,
so there's not even a back,
nothing happens, really.
So I suspect that there's something wrong
with the if statement that we have.
So let's go back.
So this if here, remember that this gets only executed
when the ID that we pass into is actually in the array.
So when it's not minus one here, okay?
And since this here is simply not executing,
it means that probably this here always returns minus one,
and therefore, this here is always false.
So there must be some problem in here.
And so, let's check the ID,
maybe there's something wrong with the ID.
So let's go down here
and so, yeah.
Here's where we define the ID.
So let's see how we did that.
So we split this string here in two
and then this created a new array
which is split ID,
which had the two strings in it.
So the type string,
which is the first element of the array,
and the ID string,
which is the second element of the array.
So the one with the index number one.
And maybe now, you're starting to see the problem
and the problem is this:
so we passed this ID into our delete item method,
but remember that this is a string
because it came from this item ID string
and therefore, up there in our delete item method
we are comparing a string to a number.
So that's something that we cannot do.
I mean, we can,
but it's not gonna give us the results that we want.
So if we ask that the string one
is in an array of zero, one and two,
which are all numbers,
then the string one is not in there
because what's in there is the number one, okay?
So you want this ID,
this one here to be a number,
so that we can then ask if the number is in the array
with the index of method.
So remember, we used the parse float function before
which was to convert a string to a float number,
so a number with decimals.
Now these IDs are integers, right?
So, no decimals.
And so, there's another function
which is simply called parse int.
So we're gonna use that one here,
so parse int.
And just like this,
we convert the string here to an integer,
so to a number,
which is then stored in ID.
And so, let's now check out if this works, okay?
So reload, and then
test one: ten,
test two: twenty,
and test three: thirty.
And in here are our three income objects.
And now I'm gonna delete this one.
So again, we have no back
so let's see our structure now.
And yes, so now it's working.
Now we have only two elements in our array, so great.
So let's see the first one, it's test one,
and the second one should be test three.
Sorry, so test three, yeah.
Because I deleted test two, remember?
I clicked here, and that deleted it.
So now it's finally working,
and what we need to do next is to actually
also delete the item here from the user interface, right?
And then update the budget here,
because this still stays the same.
So I can delete all of this and nothing happens
in the budget, right?
So let's just check our data structure,
now that I deleted all of them.
And so yeah, so we no longer have any income here
because I deleted all of them.
Okay, so this really works
and now we're ready for the next lecture.