Introduction
In this Express.js tutorial we will learn how to define route parameters and how to access them in our route handling functions.
This tutorial was done with version 4.17.1 of Express.js.
The code
As usual, we will start our code by importing the express.js module.
const express = require('express');
After this, we will create an Application object, which we will use to setup our server routes.
const application = express();
Then we will take care of registering a server route that will listen to HTTP GET requests. Like covered in this introductory tutorial, we can do this by calling the get method on our Application object.
As first input of this method we need to pass a string with the route and as second the route handling function. Focusing on the first input, it will be where we will specify that one of the segments of the URL will be used to get the value specified at that position.
So, to specify a route parameter, we simply use a colon ( : ) before the name of the route parameter. If we wanted, for example, to have a route parameter called “id” we would need something like /:id.
Assuming a resource called “users”, for a more realistic use case, the route could be:
/users/:id
Using this route, the code to register it is shown below.
application.get('/users/:id', function(req, res){
// route handling function
});
Route parameters are accessible in the route handling function on the params property of the Request object. Recall from the previous tutorials that both a Request and Response object are passed as input of the route handling function by the Express.js framework.
As such, in the implementation of our route handling function, we will start by printing the whole params object.
console.log(req.params);
Since the name of the properties on the params object will match the name of the route parameter, we can access its value by that name.
console.log(req.params.id);
To finish the handling of the request, we will call the end method on the Response object. This allows us to finish the handling of the request without sending any body data back to the client.
res.end();
The complete registering of the route can be seen below.
application.get('/users/:id', function(req, res){
console.log(req.params);
console.log(req.params.id);
res.end();
});
To finalize the code, we will call the listen method on our Application object. This starts the server, which will then be listening to incoming HTTP requests. As first input, the listen method receives the port where the server will be listening. We will be using port 8080.
As second input, the method receives a callback function that will be invoked after the app initialization is completed. We will pass a function that will simply print a message indicating that the application was initialized.
application.listen(8080, function(){
console.log("Application initialized.");
});
The complete code can be seen in the snippet below.
const express = require('express');
const application = express();
application.get('/users/:id', function(req, res){
console.log(req.params);
console.log(req.params.id);
res.end();
});
application.listen(8080, function(){
console.log("Application initialized.");
});
Testing the code
To test the code, simply run it in a tool of your choice. In my case I’m using Visual Studio Code with the Code Runner extension.
Upon running the code, open a web browser of your choice (I’ll be using Google Chrome). Then, access the following URL:
http://localhost:8080/users/20
Note that 20 is an arbitrary ID I’ve chosen. You can test with other values. After accessing the URL, go back to the tool where you are running your code. You should obtain a result similar to figure 1:
As can be seen, the object we obtain corresponds to the params field of the Request object. Since we only had one route parameter (called id), that object also only contained one field with that same name. Then we also obtained the value of the parameter by accessing the id field of the params object.