Introduction to Express - Query Parameters
In this course, you will learn about Express Query Parameters. A query parameter, also referred to as a query string, is a parameter or set of parameters attached to the end of the request URL. Query parameters are typically used to filter for a specific set of data as part of the route request.
- Explain the query parameter
- Learn how to implement a query parameter
- Understand the req.query object
- Learn how to access the query parameter from the req.query object
- Learn the structure of a route to reject invalid query parameters
This course is intended for anyone who wants to learn about Express.
Introduction to Express - Query Parameters. To begin this video, I'm going to go over the setup of this lab environment. I have this file, cardata.js, which contains an array of 500 car objects. Each car object has the following properties: an id, a car_make, a car_model, and a car_year. I'm using this file to represent the data being returned from the database. Switching over to the server.js file, I've imported this cars array as cars. I currently have an existing get route with the path api/cars that returns all the cars from the state array as a Json object.
On the right of the split screen, I have Insomnia open for API route testing. Currently, I have the path of this route in the address bar. And I will click on 'Send' to demonstrate that this route does indeed return all the cars as a JSON response. Now, the scenario I'm going to introduce is I'd like to modify this route to return only the cars that match a specific make and model that is set as part of the route request. And I'm going to use query parameters to accomplish this. A query parameter, also known as a query string, is a set of parameters attached to the URL. And these parameters aren't specifically part of the route but they are expected as part of the requests to the route. And these parameters are available in a special query object that's part of the request object.
To demonstrate this inside of the route, I will "console.log (req.query)." To initiate this over to the right, I will hit 'Send.' And now, in the terminal to the left there is an empty object, req.query has been acknowledged, but no query has been attached to the request. To create a query parameter, I need to add a question mark at the end of the request URL. Next, I need to write a key-value pair for the query. After the question mark, I will type "make" and set it equal to Toyota. I will hit 'Send' again. And in the console, there's an object with the property of make and value of Toyota, matching the query parameter that's part of the URL request. Multiple parameters can be added to the end of the route. To do so, I will type the 'n' symbol after Toyota and add a new parameter named model, and set it equal to Tacoma. I will hit 'Send' again. And in the console, there's an object with both query parameters along with their corresponding values.
Now, the typical use case for query parameters is to request data based on a set of given criteria. Back over inside of the route, I'm going to make some changes to the data that is returned in order to match the query parameters given. First, I will replace the console log. Using the structuring, I'm going to set a variable for both make and model from the req.query object. So, I want to make both these query parameters mandatory. And in order to enforce this, I'm going to use the if statement to confirm that both of these properties do exist and have a value from the route requests. If, and using the not operator, not make or not model. I'm stating here if the make or model doesn't exist or is undefined, I want something to happen. In this case, inside of the statement I will type "res.status" with a status code of "(404).send" and I will send back a object with a property of message and a value of "404 route not found." And on the following line, I will add a empty return to stop the execution of the route.
Now, this portion is ready to test out. And what I'm going to do here is remove the letter "l" from the word model as part of the query parameter, intentionally creating this misspelling. I will hit 'Send.' And two things have happened in Insomnia. There is a status in the status bar "404," and below is a message "404 route not found." Now that this portion is complete, next I'm going to use the filter method on this array of car data. And the purpose here is to return the car data that matches the query parameters that are sent as part of the requests. "cons carsfilter = cars.filter()," passing in that arrow function with car as our argument. With the argument, I'm going to first filter for the cars based on the make query, "car.car_make = = = make." Car_make is from the object structure shown earlier in the video, and make is coming from the destructuring of the query object above.
Along with this, I also wish to filter for the car model. Changing the filter with the double and symbol operator, "car.car_model = = = model." So, the filter method will return any car that has a matching make and model, and save it to the cars filter variable as a new array. Lastly, I'm going to send back cars filter as JSON. Inside of the res.json method, I will replace cars with carsfilter. Now, this route is ready to test out in Insomnia. First, I want to fix the spelling of model that I intentionally broke earlier in the video. As a reminder, I have two query parameters as part of this request URL; make which is equal to Toyota and model which is equal to Tacoma. I will hit 'Send,' and below is a response with two car objects as array, both with the make of Toyota and the model of Tacoma. And that's it. Thanks for watching Cloud Academy.
Farish has worked in the EdTech industry for over six years. He is passionate about teaching valuable coding skills to help individuals and enterprises succeed.
Previously, Farish worked at 2U Inc in two concurrent roles. Farish worked as an adjunct instructor for 2U’s full-stack boot camps at UCLA and UCR. Farish also worked as a curriculum engineer for multiple full-stack boot camp programs. As a curriculum engineer, Farish’s role was to create activities, projects, and lesson plans taught in the boot camps used by over 50 University partners. Along with these duties, Farish also created nearly 80 videos for the full-stack blended online program.
Before 2U, Farish worked at Codecademy for over four years, both as a content creator and part of the curriculum experience team.
Farish is an avid powerlifter, sushi lover, and occasional Funko collector.