In the last video we took a closer look at the request object,

now let's check out the response object.

While the request object allows the application to look at the request that

the client has made,

the response object offers ways to shape the response back to the client.

In this video, we'll use the name received from the form and

send it back in a message that greets the user.

Before we dive in,

let's take a look at the response object from the express documentation.

Here's the documentation for the request object.

Over on the right you can see there's quite a few different methods that control

how the app responds to a client.

For example, we've seen the send method, it sends a response string.

We've also been using the render method too.

It merges the data with the templates to surf dynamic pages.

There's also another method that's commonly used to send back

data to the client, JSON.

Sometimes clients don't want all the presentation of HTML and

CSS, they just want the data.

That's what JSON is good for.

Serving data is the primary use for Express for many developers.

We won't cover that in detail in this course,

but check the teacher's notes for more resources if you're interested.

For now, lets just have a quick look at the JSON method.

Open the app.js file, let's replace the render method with JSON and

serve the request's body.

Also remove the logging line if you haven't done already.

If I go to the browser now and enter my name and hit submit.

I don't get an HTML page at all.

I just get the JSON string for now.

I just wanted to show you a little of the response object's flexibility.

We'll look at some more of the Response object's methods soon.

For now, I'll revert back to the hello template.

We'll surf the same template when the user post the form,

remember poke let's you add some basic programming logic to your templates.

So you can use the same template to show different HTML content.

For example, we can show only the forum when the browser

issues a get request to this route.

But we'll add the users name to the welcome message above the forum when we

rendered the same template from the post request.

First, I'll pass in the name to the render method.

Then, I'll open up the hello pug.

I want to welcome the student when they enter their name.

So, I'll nest the H2 element under the if statement,

checking whether if name is defined.

Now, the welcome message will only show up if the name is defined.

The only way that the name can be defined

is when the out root receives a form submission.

In other words, when we make a get request to the application,

the name won't be defined and will render the get route.

But when a post request comes in, or

when the form is submitted, the name will be defined.

And the welcome message will appear.

Let's switch back to the template and replace the student with a name variable.

Because we want to surround the name with a static text, we will use interpolation.

While we're at it, let's hide the form if the name is defined.

We do that by using the else keyword and then indenting the form under it.

Save the hello.pug file and switch back to the browser.

You might notice that if you just refresh the browser after submitting the form,

you'll see the welcome message.

That's because the name has been already entered earlier.

This happens because the browser refreshes the last post request from the forum.

Including the data for the request.

To make sure that you're getting a get request, hit enter on the URL.

Now you can see that the welcome message is gone.

And if I enter a name and hit Submit, the welcome message is back.

Cool, it's working.

Again, if I send another get request, we'd get the same behavior.

The name would get lost.

We've completed the request response cycle using the data we collected from the user.

That's really cool.

The basics you've learned are like a scaffold you can build out from here.

Next, we'll take a closer look at the problem of the name not being saved and

see how we can fix that.