Welcome back, guys, to another lecture today.
We're going to work on the car model and we're going to create this car model really quick.
Now go back to your map, your starter inside the models, create a new file car called Cartagena's.
Now, here we're going to export export a class.
So before class class.
Now, this class, remember, every class needs to have a constructor.
Now, the constructor of this class will not take any parameters.
So it only will take these movies items.
That will be an empty array.
Right.
So we will have an empty movies array.
So later on, we're going to store the movies that we want to buy here, the items that we want to buy.
Now, we need to create a couple of methods here.
The first method that we need to create is called add item.
And inside we want to be stored a number of movies, title of the movie and the price of that movie.
Right now I can do this and I can create an object here called Item.
And inside I'm going to just specify number equal to this.
I'm sorry, this that number equal to the number.
But the S6 when we we can also skip this part because I'm going to use the same exact names, but I
can just use them like this.
So I haven't shown you this before, but this is how you can create those.
Right.
So you don't have to specify these that number equal to that number, these that these the title equal
to that title.
Now I'm just going to create one here and I'll say this.
That number is equal to that number that we are passing through the method.
Right now, this is exactly same as this.
So we missing here something I want everything that every time we create a new we adding new item,
I want to have a specific ID because later on we're going to need that ID add in JavaScript you can
create your own specific I.D. using a timestamps and stuff like that.
But there is a better way actually you can use this unique I.D. So if you go back to NPM and PMG as
dot com package slash unique idea or just type on the Internet.
So here is how you can install it after that.
Here is how you can require it.
Right now I'm just going to copy this one.
I have open a new tab, so make sure that you are inside your MAPI starter npm install unique ID that
is that safe.
I'm going to save as development dependency and that should take a couple of seconds.
Right.
Not too long.
OK, go back to your package.
Jason in here is we do have these unique ID cool in your version might be different.
Don't worry about that one.
Now one more thing we need to do is to import this one import unique idea.
Sorry, not equal from and we're going to say unique ID here is always giving us the outer finish.
Right now here, what we can do is to set this unique idea like this without semicolon actually.
Right.
So this will call the method for creating Unicode and it will create a unique ID for us.
Now, one more thing that we need to do is we actually we created this theory and I want to push this
item inside that array.
So outside here, outside from this object.
So you say this that moves items that push your idea of use, push and push the item back there.
Now, also, we need to return the item next so we are done with this method.
So let's create two more methods here.
The next method that I'm going to create is show list or you can show us your card.
Doesn't matter in here.
Return these movies items.
So it will return the full array after we adding things.
The disarray will be full so we can use this method.
Maybe, maybe not.
OK, next thing that I want to add here is to be able to delete the item from the card.
And for doing this we will need to have this idea here.
Right, because the number, the title, the price can always be different and we will not be able to
find this one here.
So first things first.
I will use find index to find the current index const index
equal to these that movie.
So I'm searching this movie Saidon and I'm saying, OK, dot, dot, fine index.
Remember, we used fine and finding eggs during our practice before, and I want to say the current
element, so grab the current element in the current element, it should be equal to the idea that we
are passing through here.
Right.
So I'm looking through each and every element and when, whoops, this should be semicolon here.
And when this method is satisfied, it's true, then that index will be stored in our constant.
Right now, what we can do this move is items that slice.
So we're going to use the place better.
I'm going to define the index in one.
So what this will do.
Now, this will remove only one element because we specifying one element in the index saying, OK,
start from that position.
And that's one because this index is going to give us the position of the element.
We find it right.
So, for example, if I have five elements we are searching for number three, it will find that position
of the three.
So I say position three, delete it.
That's only one.
If you put two here, it will delete the next one as well.
But that's not our goal.
And the next thing that we want to do is to update number of movies.
Right.
For example, this number here, let's add, for example, if I have five, if I if I want to buy five,
because then I change my mind.
I want to have six or seven tickets.
Right.
So here we need two things.
The idea and the new number.
Right.
Because this idea, again, we're going to use to find it enough that we just kind of going to update
it.
And this we will do in one line.
So we will say this, that movies are items that fine.
So here we are using the cousin of this one.
So this is fine index.
This is the cousin.
So what this will do, it will go to the cops, to the current element again and the current, Heidi.
Ideally, that will be equal to the idea that we are passing on top to the function.
OK, so when this is done, when we find that item from this class, from this array, so we're going
to find it, for example, it's on them.
It's on the first I don't know, it's on the fifth position.
And that item we can just get the number.
I get the number here and we can update it to the new number that we are passing on top.
And that's pretty much it.
Ladies and gentlemen, so we find that we find that in sorry we find it element and we just assigning
the new number to this number property here.
And that's pretty much it.
Now I'm going to save this one.
So we need to test this.
By the way, uh, close this one.
Open the index and let's close this one.
Now, in the index, we first need to import this movie instead of a movie.
I'm just going to put a card in here.
I will say card.
That is good.
Now here.
So we have create the search object.
The movie object.
What else did we create something else.
OK, let's say the card object now for the test is testing purposes.
I'm going to use the object with capital.
It's better now.
I'm going to use this window here and I'm going scroll down.
So movie controller, this is still in the movie in here, I will say.
Car controller, nice.
So here I will say window that card, equal new car.
Remember, we don't have to specify anything because our car.
Doesn't require a constructor to have something right now that is pretty much it.
So what we can do is actually open up here, inspect it, go to the console lock and window that car.
We do have the access and here it is, the empty movies item.
Right now, I can use this card here and add items I can call the function and I will say the number
will be five here.
Then the second parameter was the title title of the movie in The Price, for example.
Then let's save this one.
Here it is.
Now you can see that the idea, that unique idea that we generated from that AMPM script is working.
OK, let's use the arrow up and let's change this to three.
Let's find the movie title one here.
Enter.
Now, if I go to the card only, I will have two items inside in that array and I have different unique
IDs.
Right now, let's add one more movie to here and let's seven.
Good.
Now, what I want to do is to delete the second one, right.
So how we were doing it card that the lead item in here for the delete.
We only need to specify where was it this ID.
Right.
By the way, the I.D. saved is a screen here.
So remember you need to pass it as a string and I'm going to hit enter in this shou we should have two
at the moment right.
Without this one in the middle which were number three or one.
Right.
OK.
So I'm just going to see the cart here it is, we do have the two items and here it is.
We do have the movie title one.
Did we believe that one or not?
Let's see what's happening here.
OK, you know what?
I'm just going to start from the beginning.
So I'm going to add one item.
Here it is.
I'm adding this one and I want to delete this one.
So if you go back to the car, so we have actually we do have three now.
Right, because we can clean it now.
I just want to add the last one.
Delete the last one.
Sorry.
So car delete item in here.
I'm going to pass the last one.
I'm going to hit enter and let's see the card object.
We do have two but are we deleting the right one.
Actually we're not deleting the right one.
And why is this happening.
No idea.
Let's check to see if we are having some problems here.
And the problem is obvious.
So we are assigning it instead of checking if they are equal to the one that we are passing.
So save that one here.
It's OK right now.
I'm just going to go back to the card.
We don't have nothing, right?
So I'm going to add an item here in the cart and I'm going to specify one here.
One, that's it.
Go back, put two here.
And to save it, let's check the card.
We have two objects there.
Nice.
And I want to delete the first one.
So let's check if that will work.
Card delete item nice in close.
We need to put the ID, delete it then call it.
We do have one but let's leave this with ending with.
We will we we will be.
There it is.
That's it.
Now let's update it cardno update number of the movies in here.
We need to pass the I.D. first.
Oops.
So I'm just going to pass the I.D. and after that, I want the number to be changed to five, this one
and here the car dated.
Ladies and gentlemen, this is everything that we have done so far.
So sorry about the hiccup before, but it wasn't on purpose.
So here, instead of checking if it's equal to I was just assigning it to decide here.
And that was the problem.
Now, displacement that is working.
The update is working the show list.
It's going to work if you use the show list.
So called the show list and.
And it will give you back the entire array.
Actually, we do have only one, right?
So that is pretty much it.
We're going to do this next time and we're going to change the controller.
But this was the model and next time we will do the controller.
So take care.
And this is how we are adding new items we use.
We learn something new, how to create a unique I.D. We return this the entire one, and we push the
item that we just created.
Then we just delete that based on the idea using the index and the splice model.
And after that we update it using the fine and to the new to the new value here.
So that's pretty much it.
I'll see you in the next one.