What are routing parameters? – Express Essential Training Video Tutorial | LinkedIn Learning, formerly Lynda.com

“

– Before we build on our express routing knowledge, let’s review what we’ve learned thus far. A route is how an application responds to a client request to a particular end point. A few lessons ago, we created several routes to get our application up and running. We even learned how to use the tool postman to access a variety of different routes, tied to various paths and methods. In order to construct our routes in express, we need two key components, the path and the method. We learned that the path is what defines our end points. In this example, “/animals” is our path. This could be slash images or slash data, whatever makes sense for your application and the information that it is providing or utilizing. Then our method is what defines the action that we’re going to take with our end point. In this example, we have a GET method , which will retrieve data and provide it to the client. For this course, we are focusing on four route methods. These are closely linked to CRUD operations, post, get, put, and delete. In this lesson, we’re going to build on our knowledge of routes and discuss routing parameters. Routing parameters are segments of the URL that are used to capture values specified at positions within a URL. This means that you can pass data points through the URL to help define information that can be used to execute route methods in your application. It is a very cool and powerful feature. To better understand this concept, let’s head over to the official express documentation. In the express documentation, within their routing guide, head down to the route parameters section. In this section, they’ve provided a great example for us to break down. Here we see the path is “/users”. Colon user ID slash books, colon book ID. In this example, user ID and book ID represent two different route parameters. You can then see in the request URL right below that those route parameters have been replaced with actual values. 34 for the user ID, and 8989 for the book ID. The values passed in the route correspond to the parameters that have been set for the route. We are looking for a user with an ID of 34 and a book with an ID of 8989. If we wanted to capture or access the values that were passed as route parameters, we would do so using the request. Remember you’ll often see requests abbreviated as REQ, and response as RES. Either way of representing them is fine. You can see that the request dot params returns an object with the key value pairs corresponding to the route parameters and their values. Further down in the documentation are some more advanced ways of using route parameters. But for this course, we are just going to stick to the basics for now. Let’s head to our editor and create our own route using route parameters. To illustrate how to use routing parameters, we are going to set up a brand new GET end point. Right below our existing GET end point, let’s start our new end point with routing parameters. So I’m going to scroll down to our GET, and then right below, I’m just going to make a note here. And this is our GET with routing parameters. All right, and just as we did with our previous GET, we will start with app and then .GET, the method that we need in order to set up our route. Let’s pretend like we’re creating an end point for a class and we’re going to pass a student’s ID as a routing parameter. So that will give us the path slash class slash colon ID. So remember our paths will go in quotation marks and that slash class slash colon ID. All right, and we can go ahead and save that. And then next, as we’ve done in our other routes, we need to add the request and response and set up the rest of the handler. So request, and then response, and then I’m going to set up my arrow function. If we recall from the express documentation, route parameters are stored in the request under the property params. So let’s go ahead and console log those out so you can see what this looks like, and we can confirm that we have everything set up correctly. So console log request dot prams. Excellent. Before we head over to our browser, let’s go ahead and remove the console log in our app dot listen, that has the mock data. So go ahead and scroll down to app dot listen, it’s at the very end of our file. And we’re just going to remove that to clear up some of the noise in our console. So make sure you save, and then you’ll see now in our terminal, we just have the server is running on port 3000. So let’s go ahead. Let’s open our browser, side-by-side with our editor. Remember because we are logging out parameters in our server, we will see these logged in our terminal, not in the browser. So in our browser, we will add our route to local host 3000, so, local host 300. And our new route is class. And then for the ID, I’m going to put the number 10 because that’s my favorite number. And if we hit enter, we see in the browser that the page itself doesn’t change. Because we’re not passing any data to the client side at this point. However, if you take a look in our terminal, you will see that the request parameters are being logged out. You should see an object with a key of ID that corresponds to the route parameter ID. And then the value that we passed, which in this case is 10. One thing I want to note is that any route parameters are going to be transmitted as strings. So it’s important to keep that in mind, depending on what you want to do with the parameter. In our case, we want to use the parameter as a number. So let’s head back to our editor and add some additional code. Let’s go ahead and remove the console. And we’re going to create a new variable called student ID that we will store the student ID parameter in. So student ID will be set to request, dot params, dot ID. So this corresponds to our request parameter ID, all right? So we have our variable student ID. We’ve set it to request dot params dot ID. However, as we just mentioned, we want to use this as a number. So we need to change this string to a number, and we can do that using the number function. So in order to do that, we’ll actually wrap this request dot params dot ID in the number function. So the number function, if you’ve never used it before, it’s a capital N, number, and then open and close parentheses. And we are passing that request dot params dot ID as the argument in order to convert that from a string to a number. Next, we’re going to use this ID to reference our existing mock dataset and return the student that corresponds to the matching ID. Now, I know we didn’t call our mock data anything specific. so just for example’s sake, we’re going to pretend like our mock data is actually a list of students in our class. So let’s create a new variable that we’ll call student. And we’re going to set this equal to data, which is our mock data. That is an array. Now we’re going to do some data manipulation using a JavaScript array method called filter. Using the JavaScript array method filter, we’re going to filter the data down based on the student ID. If the student dot ID matches student ID, then we will return that student. So we will say data dot filter, all right? And then we’re going to call our element “student”. And then we’re going to implicitly return this function, which if you’re not familiar with what this means, it basically means we will not use the return keyword. We will just simply return it without having to explicitly say return. So then if the student dot ID equals student ID, then we want to return that. All right? So let’s just break this down before we move on. So we have our student variable. Then we have our data, which is our mock data. And we’re going to filter that data using the JavaScript array method filter. We will set up this filter array method and call the element that we’re living through “student”. And then we will return the student.id, so right from our mock data, where there’s student.id that matches our student ID that was passed as a request parameter. Excellent. Now, what we’re going to do, is we will pass the response using the method “send to our client”. So we will go response dot send, and then we’re going to pass the student that was returned. Now let’s head back to our browser and see this in action. In our browser, let’s go ahead and head to our local host 3000. And we know the route is class. And this time let’s pass an ID of 15, and see what we get back. You should see that you now have the student entry that corresponds to the ID 15. You can change this number to anything that you want. And if there is a match, you will get a corresponding result. If not, you’ll just get an empty array. So if we try 3, because we know in our data set, we had 25 entries, so if we have 3, we see that we get our student Darlene. However, if we try 50, because we only had 25 entries, we’re just getting an empty array at this point. And that’s because we used the filter method. And if there’s no matches, then nothing is returned. But, awesome work. Routing for amateurs will be a very powerful tool to help you retrieve information using express.