Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses 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.
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 serve 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, let's 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 serve the same template
when the user posts the form,
2:09
remember pug lets 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 form when the browser
2:22
issues a get request to this route.
2:27
But we'll add the user's 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