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 Request object.
HTML Forms
-
Sending form data (MDN)
- HTML forms (MDN general form page)
Documentation
What body-parser
Does Under the Hood
What is body-parser doing? In case you're curious, here's a little code that reads the body of an incoming request and logs it to the console. This is just a flavor of how using body-parser is making your life easier!
let bodyString = ''
req.on('data', chunk => bodyString += chunk.toString());
req.on('end', () => {
console.log(bodyString);
});
Note that even after bodyString
has been read completely, it still needs to be turned from a string into data your application can use, all of which is taken care of by body-parser.
Remember when we wrote out first route
by hand and had to use a request and
0:00
response object for the route handler.
0:05
We've been using the response object
to return a response to the client.
0:08
But we haven't been using the request
object yet, apart from declaring it.
0:12
Let's look at the express
documentation for the request object.
0:18
There are quite a few properties
that you can access on the request.
0:22
The one we're most interested
in is the body property.
0:28
This is where our form
response will end up.
0:33
Notice though,
that by default it is undefined.
0:36
To put the form responses into the body,
we'll need what is called Middleware.
0:41
Middleware is basically some code that
fits in the middle of a request or
0:47
a response.
0:51
Middleware does something
to the incoming data and
0:53
hands the result of to
the rest of your application.
0:56
We'll look more deeply at
Middleware later in this course.
1:00
But we don't really need
to know a lot about it yet.
1:04
I will show you how to install
some middleware in a moment.
1:06
First, though,
1:10
let's use the console to take a look
at the request object more closely.
1:11
In the app.js file,
1:16
I'll add a line in the post route to print
out the request object to the console.
1:19
I'll save it and then go back to
the browser to create a new request.
1:25
Our code will run.
1:31
I don't need a name right now,
and I'll click on Submit.
1:34
Moving to the console
where Express is running,
1:39
you can see that the request object
includes a lot of information.
1:41
We will look too closely at the request.
1:46
I just wanted you to
get an appreciation for
1:48
the amount of work expressed as to
simplify our job as developers.
1:51
Most of the time,
we don't need many of these properties.
1:56
We'll just access a select few.
1:58
I'll clear this screen, and
then we'll switch back to the app.js file.
2:02
I'm just going to examine
the body property now.
2:06
If I submit the form now using my name And
switch to the console,
2:11
as you can see, I get undefined,
just as the documents promised.
2:19
Let's install the middleware,
called for by the docs.
2:25
It's called body parser and it will
process the incoming form submission data
2:30
into a format that's easier for
our program to read.
2:34
I'll go to the terminal and
then I'll type,
2:39
npm install body-parser.
2:45
When that's done, I can require
it in my app.js file at the top.
2:51
Now, we'll tell Express to use it.
3:09
Body-parser contains several parses, the
different ways the clients can send data.
3:12
HTML forms normally encode the data
they send the same way URLs do.
3:19
So, we'll need to use
the urlencode parser.
3:25
We'll pass in an object, turning
3:32
off the parser's extended option.
3:37
Don“t worry too much
about this line of code.
3:46
To be honest,
3:49
I have to look this up everytime I need
to include it in my Express applications.
3:50
I've included more information
about how forms and data and
3:56
how body-parser works
in the teacher's notes.
3:59
Now, let's submit a name.
4:03
In the console, you can see the body
property has now a username property.
4:06
Our app is now able to understand the
information it's getting from our form.
4:14
Next, we'll use that information to send
something meaningful back to the client.
4:19
While we do this, let's take a closer look
at the response objects in the next video.
4:24
You need to sign up for Treehouse in order to download course files.
Sign up