WEBVTT

0
00:00.830 --> 00:08.300
Now in the last lesson we solved some of our problems namely how do we get some default items into our

1
00:08.300 --> 00:16.430
ToDo list to start off without having to use arrays and instead getting this from MongoDB database.

2
00:16.520 --> 00:18.050
There's just one problem.

3
00:18.230 --> 00:24.830
If I tried to add a new item right now then my app will crash because again it's telling me there's an

4
00:24.830 --> 00:33.320
array called items that we used to use down here no longer exists and I can't really push something onto something

5
00:33.320 --> 00:35.330
that doesn't exist anymore right?

6
00:35.510 --> 00:43.880
This happens in our post route and that is when we decide to add a new item and we trigger the form

7
00:43.910 --> 00:51.170
to post to our root route which gets caught in here and we try to grab the item that the user tried

8
00:51.170 --> 00:56.840
to post and then we try to push it into our items array.

9
00:57.560 --> 01:01.150
How can we do this using MongoDB instead?

10
01:01.490 --> 01:07.960
Well for now I'm going to completely ignore the fact that we had a work route and a normal route.

11
01:08.000 --> 01:12.140
I'm going to simply delete all of this.

12
01:12.350 --> 01:18.980
We know that when this post route is triggered we can tap into something called req.body.

13
01:19.130 --> 01:27.410
newItem and that will refer to the text that the user entered into the input when they clicked on the

14
01:27.440 --> 01:31.580
plus button to add that newItem. That text

15
01:31.580 --> 01:42.850
I'm going to save into a constant called itemName. And then I need to create a new item document based

16
01:42.850 --> 01:47.050
off my model in MongoDB. As a challenge

17
01:47.050 --> 01:54.070
I want you to pause the video and create this newItem document using this itemName that got passed

18
01:54.070 --> 01:56.760
over.

19
01:56.800 --> 02:02.230
Okay. So this is exactly the same as what we did up here when we created new documents.

20
02:02.260 --> 02:10.810
We're going to write const item = new Item so create it from the item model with Mongoose and then

21
02:10.810 --> 02:16.750
that item only has a single field which is called name and the value we're going to give it is going

22
02:16.750 --> 02:21.990
to be the item name that we got passed over from our list.

23
02:22.020 --> 02:23.490
ejs.

24
02:23.720 --> 02:30.730
Now that we've created our new document, then instead of insertMany or using some of the other insert methods,

25
02:31.070 --> 02:39.200
we could actually just use the Mongoose shortcut by saying item.save and that will save this item

26
02:39.470 --> 02:42.240
into our collection of items.

27
02:42.260 --> 02:52.160
So now if we hit save and we go back to our localhost: 3000 and we go ahead and hit enter to refresh

28
02:52.160 --> 02:53.490
our web page, then

29
02:53.520 --> 03:02.960
now if I added a new item here and I hit +, then I head over to my Mongo shell and I say "show dbs"

30
03:03.480 --> 03:05.440
"use todolist

31
03:05.640 --> 03:14.790
DB". "db.dot items.find" and you can see I now have 4 items.

32
03:14.840 --> 03:19.030
So it was successfully saved into my items collection.

33
03:20.630 --> 03:29.870
In order to get it to show up here all we need to do is just to redirect-- res.redirect back over

34
03:30.020 --> 03:31.940
to the home route.

35
03:32.000 --> 03:40.520
So now after we save our item then we re-enter over here and we find all the items inside our items

36
03:40.520 --> 03:43.600
collection and render it on the screen.

37
03:44.150 --> 03:47.450
Let's again test our app localhost:3000

38
03:47.510 --> 03:49.030
let's add a new item

39
03:49.040 --> 03:54.080
hit +, redirects to the home route and we see it update immediately.