Access Form Data and URL Parameters with Express
In this lesson we'll cover how to access route params (/users/:id) and then use express.urlencoded() to give express the ability to process URL encoded form data that we'll need to add and update notes in our application. The POST body will be made available on req.body. A mention is also made about how to read query parameters from req.query.
express.urlencoded()
The extended option we pass into the urlencoded method adds the following capabilities according to the docs:
This option allows to choose between parsing the URL-encoded data with the querystring library (when false) or the qs library (when true). The “extended” syntax allows for rich objects and arrays to be encoded into the URL-encoded format, allowing for a JSON-like experience with URL-encoded
body-parser
In earlier versions of express it was encouraged to use the body-parser middleware package which is published separately from express. The common functionality is now built-in however as express.urlencoded() and express.json().
More info:
- https://expressjs.com/en/api.html#req.params
- https://expressjs.com/en/api.html#req.query
- https://github.com/expressjs/body-parser
Jamund Ferguson: [0:00] Open up your index.js file and right before your routes are declared, type app.use(express.urlencoded()), and pass in an object with a key of extended, and the value of true. This built-in middleware gives your Express app the ability to process data posted into it and stores it on the request object as req.body.
[0:21] Open your routes and go into the create function. Type const { title, body } = req.body. This syntax, which is called destructuring, grabs the title and body properties off req.body, and assigns them as variables with the same name.
[0:40] Type console.log(), and close that out. Now, go into the read function. If you recall, this route was specified as /notes/:id. We can grab that ID by typing const { id } = req.params. Let's go ahead and add the id to our JSON response.
[1:05] For the update function, we need both the id and the title and body. We'll grab them the same way, and we'll log them as well -- console.log().
[1:25] For the delete, all we need is the id. const { id } = req.params. We can say console.log().
[1:38] Save that. Start our server up. First we'll try our create route. Type curl -X POST -d title="hello" -d body="world" http://localhost:3000/notes/. You can see in our logs hello and world received.
[1:59] Let's hit the same thing but this time add an id to the route for update. You can see we're updating the id 123 with hello and world.
[2:06] Let's try delete. curl -X DELETE. Paste in the /notes/123. Indeed, we're logging deleting 123.
[2:17] Finally, let's check our get note by just curling /222. You'll see the id 222 is right here in our response.
[2:26] There's one more thing I want to add. That's the ability to specify how to sort the list of notes, our list call. I'd like to be able to add ?sort=ASC or DESC, but right now we haven't hooked that up. Let's look at how to add query params.
[2:41] Open up your routes file again. Right here, in list, type const { sort } =rec.query. rec.query is where all the query parameters are stored in Express. Let's log that, console.log({ sort }). Save the file. Open that up again. In my terminal, I'll have to put this in quotes, but it's the same thing. You'll see sort=DESC, the logs, and sort=ASC.
[3:08] There's not an exact science to figuring out what should be a query param, or a URL param, or what should come in the post body. My suggestion is to look at other APIs out there that you enjoy using, and borrow the conventions that work, and ditch the ones that don't.