A closer look at Express's Response object.
In the last video we took a closer look at the request object, 0:00 now let's check out the response object. 0:04 While the request object allows the application to look at the request that 0:06 the client has made, 0:10 the response object offers ways to shape the response back to the client. 0:12 In this video, we'll use the name received from the form and 0:18 send it back in a message that greets the user. 0:21 Before we dive in, 0:24 let's take a look at the response object from the express documentation. 0:25 Here's the documentation for the request object. 0:30 Over on the right you can see there's quite a few different methods that control 0:33 how the app responds to a client. 0:37 For example, we've seen the send method, it sends a response string. 0:40 We've also been using the render method too. 0:47 It merges the data with the templates to surf dynamic pages. 0:51 There's also another method that's commonly used to send back 0:55 data to the client, JSON. 0:58 Sometimes clients don't want all the presentation of HTML and 1:01 CSS, they just want the data. 1:05 That's what JSON is good for. 1:08 Serving data is the primary use for Express for many developers. 1:10 We won't cover that in detail in this course, 1:16 but check the teacher's notes for more resources if you're interested. 1:18 For now, lets just have a quick look at the JSON method. 1:22 Open the app.js file, let's replace the render method with JSON and 1:26 serve the request's body. 1:32 Also remove the logging line if you haven't done already. 1:37 If I go to the browser now and enter my name and hit submit. 1:41 I don't get an HTML page at all. 1:48 I just get the JSON string for now. 1:51 I just wanted to show you a little of the response object's flexibility. 1:54 We'll look at some more of the Response object's methods soon. 1:59 For now, I'll revert back to the hello template. 2:03 We'll surf the same template when the user post the form, 2:09 remember poke let's you add some basic programming logic to your templates. 2:13 So you can use the same template to show different HTML content. 2:18 For example, we can show only the forum when the browser 2:22 issues a get request to this route. 2:27 But we'll add the users name to the welcome message above the forum when we 2:29 rendered the same template from the post request. 2:34 First, I'll pass in the name to the render method. 2:38 Then, I'll open up the hello pug. 2:49 I want to welcome the student when they enter their name. 2:54 So, I'll nest the H2 element under the if statement, 2:59 checking whether if name is defined. 3:05 Now, the welcome message will only show up if the name is defined. 3:11 The only way that the name can be defined 3:15 is when the out root receives a form submission. 3:18 In other words, when we make a get request to the application, 3:22 the name won't be defined and will render the get route. 3:29 But when a post request comes in, or 3:35 when the form is submitted, the name will be defined. 3:38 And the welcome message will appear. 3:41 Let's switch back to the template and replace the student with a name variable. 3:46 Because we want to surround the name with a static text, we will use interpolation. 3:53 While we're at it, let's hide the form if the name is defined. 3:59 We do that by using the else keyword and then indenting the form under it. 4:08 Save the hello.pug file and switch back to the browser. 4:13 You might notice that if you just refresh the browser after submitting the form, 4:19 you'll see the welcome message. 4:23 That's because the name has been already entered earlier. 4:25 This happens because the browser refreshes the last post request from the forum. 4:29 Including the data for the request. 4:34 To make sure that you're getting a get request, hit enter on the URL. 4:37 Now you can see that the welcome message is gone. 4:43 And if I enter a name and hit Submit, the welcome message is back. 4:46 Cool, it's working. 4:55 Again, if I send another get request, we'd get the same behavior. 4:57 The name would get lost. 5:04 We've completed the request response cycle using the data we collected from the user. 5:13 That's really cool. 5:18 The basics you've learned are like a scaffold you can build out from here. 5:19 Next, we'll take a closer look at the problem of the name not being saved and 5:23 see how we can fix that. 5:27
You need to sign up for Treehouse in order to download course files.Sign up