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