- 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.