1 00:00:00,140 --> 00:00:00,560 All right. 2 00:00:00,750 --> 00:00:07,580 Up next, let's see how we can accept Json data so our get request works as expected. 3 00:00:07,610 --> 00:00:08,570 Beautiful. 4 00:00:08,600 --> 00:00:17,000 But now we need to add our first middleware so we can accept data that eventually is going to be coming 5 00:00:17,000 --> 00:00:18,050 from the front end. 6 00:00:18,050 --> 00:00:25,130 So let's say if the user wants to log in, we'll send the Json from the front end when we want to create 7 00:00:25,130 --> 00:00:28,130 the job and hopefully you see where I'm going with this. 8 00:00:28,130 --> 00:00:33,920 And in order to do that, like I said, we need to install and set up our first middleware. 9 00:00:33,920 --> 00:00:36,800 And the way we do that, we go with app dot use. 10 00:00:36,830 --> 00:00:39,410 So this is going to be applied to all of the routes. 11 00:00:39,920 --> 00:00:46,010 It's a built in middleware at this point, so we simply need to go with express dot and then Json and 12 00:00:46,010 --> 00:00:50,960 then we need to invoke it and then we'll set up a separate request. 13 00:00:50,960 --> 00:00:53,540 And I'm purposely providing the same URL. 14 00:00:53,540 --> 00:01:00,550 So it's clear that when it comes to a request, it consists of two things the URL and the method. 15 00:01:00,550 --> 00:01:03,830 And even though the URL is the same, it's our home route. 16 00:01:03,830 --> 00:01:11,390 Essentially, since the method is different, it's a post one as far as server is concerned, those 17 00:01:11,390 --> 00:01:14,570 are two separate requests, so let's try it out. 18 00:01:14,630 --> 00:01:19,970 I'm going to navigate to a server and for now I'll close the sidebar here. 19 00:01:20,270 --> 00:01:22,790 And first we want to set up that middleware. 20 00:01:22,790 --> 00:01:24,470 So we go with app dot use. 21 00:01:24,470 --> 00:01:30,770 Again, it's applied to all of the routes we go here with Express and we invoke the Json. 22 00:01:30,800 --> 00:01:31,460 Awesome. 23 00:01:31,460 --> 00:01:37,790 Then let's go with app dot and the method is going to be what post? 24 00:01:38,090 --> 00:01:42,100 So we'll create a resource like I just mentioned. 25 00:01:42,110 --> 00:01:44,450 Yes, the URL is going to be exactly the same. 26 00:01:44,450 --> 00:01:45,620 It's going to be our home route. 27 00:01:45,800 --> 00:01:50,150 Now when it comes to the route handler, the controller. 28 00:01:50,860 --> 00:01:53,680 We have access to req and res. 29 00:01:53,680 --> 00:01:59,650 And in this case I will log just so you can see how giant req object is. 30 00:01:59,680 --> 00:02:04,000 So the request object, what we're looking for is the req dot body. 31 00:02:04,030 --> 00:02:06,250 That's where the data is going to be located. 32 00:02:06,250 --> 00:02:09,490 Since right now we have our middleware. 33 00:02:09,910 --> 00:02:11,590 So res.json. 34 00:02:11,710 --> 00:02:13,940 Then let's pass in the message here. 35 00:02:13,960 --> 00:02:15,490 Let's say data. 36 00:02:16,240 --> 00:02:17,350 Received. 37 00:02:18,190 --> 00:02:24,720 And then let's also send data property back with a req.body, because we already know that. 38 00:02:25,270 --> 00:02:28,170 The actual data is located in the req.body. 39 00:02:28,230 --> 00:02:32,620 Then let's navigate back to our Thunder client. 40 00:02:32,710 --> 00:02:34,720 And essentially in here you have a few options. 41 00:02:34,720 --> 00:02:40,420 If you want to create a new request, just click over here on a new request and of course you can manually 42 00:02:40,420 --> 00:02:41,440 copy this URL. 43 00:02:41,470 --> 00:02:45,760 Now, eventually we'll set up the global variables so we don't have to do that. 44 00:02:45,760 --> 00:02:46,660 But for now. 45 00:02:47,210 --> 00:02:49,040 In order to set this post request. 46 00:02:49,040 --> 00:02:50,930 Yes, we'll need to grab this URL. 47 00:02:50,930 --> 00:02:52,490 So that's one option. 48 00:02:52,640 --> 00:02:57,950 And the second one, you can simply duplicate this request and I'll say no, this is what I'm going 49 00:02:57,950 --> 00:02:59,990 to do throughout the project. 50 00:02:59,990 --> 00:03:03,830 So instead of spending, I don't know, ten minutes going over. 51 00:03:04,560 --> 00:03:10,760 The options, which at the moment most likely won't make any sense Once we get to that point. 52 00:03:10,770 --> 00:03:15,790 During the project, I'll say, Hey, listen, this is how you can do stuff in the Thunder client. 53 00:03:15,810 --> 00:03:19,980 So in this case, I want to duplicate this request. 54 00:03:20,070 --> 00:03:20,430 Why? 55 00:03:20,470 --> 00:03:22,740 Well, because I want to reuse the URL. 56 00:03:22,740 --> 00:03:24,030 So URL is correct. 57 00:03:24,030 --> 00:03:25,080 What do we need to change? 58 00:03:25,080 --> 00:03:26,700 Well, this is a post one. 59 00:03:26,700 --> 00:03:27,990 This is a post method. 60 00:03:27,990 --> 00:03:32,790 We want to create a resource and now we want to navigate to a body. 61 00:03:32,790 --> 00:03:35,670 This is how we send something to keep in mind. 62 00:03:35,670 --> 00:03:38,730 We need to use a proper Json syntax. 63 00:03:38,730 --> 00:03:39,480 What does that mean? 64 00:03:39,480 --> 00:03:42,510 We need to use double quotation marks. 65 00:03:42,520 --> 00:03:45,690 So notice over here, since I don't have. 66 00:03:46,470 --> 00:03:49,710 There are double quotation marks for the value. 67 00:03:49,770 --> 00:03:51,390 I'll right away have the error. 68 00:03:51,390 --> 00:03:56,400 So if you'll try to send with that read error in the bottom, it's not going to work. 69 00:03:56,730 --> 00:04:03,030 And let me just go with message and I'm going to go with Hello World because why not? 70 00:04:04,410 --> 00:04:07,200 Let's send an if everything is correct. 71 00:04:08,060 --> 00:04:16,160 First of all, we'll see the giant object because we're logging the rec object. 72 00:04:16,160 --> 00:04:17,940 And also as far as the response. 73 00:04:17,959 --> 00:04:18,860 Check it out. 74 00:04:18,860 --> 00:04:21,380 So we have message data received. 75 00:04:21,380 --> 00:04:27,230 And then I have the actual data, which is my hello world message and. 76 00:04:28,250 --> 00:04:32,930 Like I said, what we're looking for in the req object is the body property. 77 00:04:32,930 --> 00:04:34,940 And in there the. 78 00:04:35,720 --> 00:04:41,150 Actual data we're sending is going to be located after we set up the middleware. 79 00:04:41,180 --> 00:04:45,110 Again, it's not going to work unless you add this middleware. 80 00:04:45,470 --> 00:04:50,120 And with this in place, we are ready to move on to the next step.