1 00:00:00,290 --> 00:00:04,090 In the last video we took a closer look at the request object, 2 00:00:04,090 --> 00:00:06,960 now let's check out the response object. 3 00:00:06,960 --> 00:00:10,690 While the request object allows the application to look at the request that 4 00:00:10,690 --> 00:00:12,280 the client has made, 5 00:00:12,280 --> 00:00:16,720 the response object offers ways to shape the response back to the client. 6 00:00:18,240 --> 00:00:21,690 In this video, we'll use the name received from the form and 7 00:00:21,690 --> 00:00:24,560 send it back in a message that greets the user. 8 00:00:24,560 --> 00:00:25,920 Before we dive in, 9 00:00:25,920 --> 00:00:30,770 let's take a look at the response object from the express documentation. 10 00:00:30,770 --> 00:00:33,780 Here's the documentation for the request object. 11 00:00:33,780 --> 00:00:37,450 Over on the right you can see there's quite a few different methods that control 12 00:00:37,450 --> 00:00:39,245 how the app responds to a client. 13 00:00:40,270 --> 00:00:46,500 For example, we've seen the send method, it sends a response string. 14 00:00:47,756 --> 00:00:51,060 We've also been using the render method too. 15 00:00:51,060 --> 00:00:55,230 It merges the data with the templates to serve dynamic pages. 16 00:00:55,230 --> 00:00:58,390 There's also another method that's commonly used to send back 17 00:00:58,390 --> 00:01:00,440 data to the client, JSON. 18 00:01:01,860 --> 00:01:05,340 Sometimes clients don't want all the presentation of HTML and 19 00:01:05,340 --> 00:01:08,180 CSS, they just want the data. 20 00:01:08,180 --> 00:01:10,410 That's what JSON is good for. 21 00:01:10,410 --> 00:01:14,940 Serving data is the primary use for Express for many developers. 22 00:01:16,040 --> 00:01:18,110 We won't cover that in detail in this course, 23 00:01:18,110 --> 00:01:21,430 but check the teacher's notes for more resources if you're interested. 24 00:01:22,480 --> 00:01:26,273 For now, let's just have a quick look at the JSON method. 25 00:01:26,273 --> 00:01:32,131 Open the app.js file, let's replace the render method with JSON and 26 00:01:32,131 --> 00:01:34,520 serve the request's body. 27 00:01:37,720 --> 00:01:40,510 Also remove the logging line if you haven't done already. 28 00:01:41,930 --> 00:01:48,140 If I go to the browser now and enter my name and hit submit. 29 00:01:48,140 --> 00:01:50,310 I don't get an HTML page at all. 30 00:01:51,400 --> 00:01:53,260 I just get the JSON string for now. 31 00:01:54,940 --> 00:01:59,050 I just wanted to show you a little of the response object's flexibility. 32 00:01:59,050 --> 00:02:03,050 We'll look at some more of the Response object's methods soon. 33 00:02:03,050 --> 00:02:06,240 For now, I'll revert back to the hello template. 34 00:02:09,180 --> 00:02:12,430 We'll serve the same template when the user posts the form, 35 00:02:13,730 --> 00:02:18,460 remember pug lets you add some basic programming logic to your templates. 36 00:02:18,460 --> 00:02:22,560 So you can use the same template to show different HTML content. 37 00:02:22,560 --> 00:02:27,072 For example, we can show only the form when the browser 38 00:02:27,072 --> 00:02:29,958 issues a get request to this route. 39 00:02:29,958 --> 00:02:34,221 But we'll add the user's name to the welcome message above the forum when we 40 00:02:34,221 --> 00:02:38,170 rendered the same template from the post request. 41 00:02:38,170 --> 00:02:41,030 First, I'll pass in the name to the render method. 42 00:02:49,345 --> 00:02:51,740 Then, I'll open up the hello pug. 43 00:02:54,959 --> 00:02:59,920 I want to welcome the student when they enter their name. 44 00:02:59,920 --> 00:03:04,410 So, I'll nest the H2 element under the if statement, 45 00:03:05,420 --> 00:03:07,570 checking whether if name is defined. 46 00:03:11,011 --> 00:03:15,540 Now, the welcome message will only show up if the name is defined. 47 00:03:15,540 --> 00:03:18,460 The only way that the name can be defined 48 00:03:18,460 --> 00:03:21,080 is when the out root receives a form submission. 49 00:03:22,930 --> 00:03:26,820 In other words, when we make a get request to the application, 50 00:03:29,700 --> 00:03:35,870 the name won't be defined and will render the get route. 51 00:03:35,870 --> 00:03:38,240 But when a post request comes in, or 52 00:03:38,240 --> 00:03:41,880 when the form is submitted, the name will be defined. 53 00:03:41,880 --> 00:03:43,830 And the welcome message will appear. 54 00:03:46,553 --> 00:03:52,010 Let's switch back to the template and replace the student with a name variable. 55 00:03:53,560 --> 00:03:59,530 Because we want to surround the name with a static text, we will use interpolation. 56 00:03:59,530 --> 00:04:02,580 While we're at it, let's hide the form if the name is defined. 57 00:04:08,921 --> 00:04:13,729 We do that by using the else keyword and then indenting the form under it. 58 00:04:13,729 --> 00:04:17,760 Save the hello.pug file and switch back to the browser. 59 00:04:19,030 --> 00:04:23,330 You might notice that if you just refresh the browser after submitting the form, 60 00:04:23,330 --> 00:04:24,770 you'll see the welcome message. 61 00:04:25,800 --> 00:04:28,830 That's because the name has been already entered earlier. 62 00:04:29,900 --> 00:04:34,480 This happens because the browser refreshes the last post request from the forum. 63 00:04:34,480 --> 00:04:37,000 Including the data for the request. 64 00:04:37,000 --> 00:04:41,210 To make sure that you're getting a get request, hit enter on the URL. 65 00:04:43,520 --> 00:04:46,260 Now you can see that the welcome message is gone. 66 00:04:46,260 --> 00:04:53,700 And if I enter a name and hit Submit, the welcome message is back. 67 00:04:55,350 --> 00:04:56,420 Cool, it's working. 68 00:04:57,490 --> 00:05:03,070 Again, if I send another get request, we'd get the same behavior. 69 00:05:04,200 --> 00:05:06,320 The name would get lost. 70 00:05:13,730 --> 00:05:18,120 We've completed the request response cycle using the data we collected from the user. 71 00:05:18,120 --> 00:05:19,560 That's really cool. 72 00:05:19,560 --> 00:05:23,320 The basics you've learned are like a scaffold you can build out from here. 73 00:05:23,320 --> 00:05:27,920 Next, we'll take a closer look at the problem of the name not being saved and 74 00:05:27,920 --> 00:05:29,180 see how we can fix that.