Filtering Data Using Query Parameters in Express.js

Topic Overview and Actualization

Hello and welcome! Today, we enter the realm of data filtering using Query Parameters in Express.js . By the end of this journey, you will have learned how to design routes in your web applications that handle different types of requests, specifically ones with query parameters. If you're wondering what query parameters are, imagine a toy store with different sections for various types of toys. Using query parameters is like asking the store assistant to show you only the toys in the 'Dolls' section and which are 'Pink'. This way, you can directly view the toys you’re interested in, without having to look at everything on display. In programming, query parameters help us achieve the same result, but with data! Together, we'll navigate through: Understanding what Query Parameters are How Query Parameters work in requests How to use Query Parameters to filter data from our server. Ready? Let's get started!

Defining Query Parameters

In the world of web-based programming, we use URLs as the 'main door' to access data stored in various web applications (just like you use doors to go from one room to another!). Sometimes, we want to go to a specific part of the room directly. This is where query parameters come to the rescue! Consider an example URL — https://toyshop.com/toys?toyType=dolls&color=pink . Here toyType=dolls&color=pink represents the query parameters. toyType and color are the query keys, and dolls and pink are the corresponding query values. Imagine the scenario: You visit an online shop. You enter 'pink dolls' in the search bar to view all pink dolls. When you hit 'Search', a request is fired to https://toyshop.com/toys?toyType=dolls&color=pink . The server uses the query parameters to filter data before it's returned back to you. Understanding query parameters allows us to create more sophisticated and versatile web applications, enhancing the user experience. Query parameters are widely used in real-world applications such as e-commerce platforms, search engines, and analytics tools.

How Query Parameters Work

Now, let's understand the magic behind the scenes in query parameters! When you visit your online toy store searching for 'pink dolls' by firing the request https://toyshop.com/toys?toyType=dolls&color=pink, the server does the following: It takes the incoming request, breaks down the URL, and extracts the query parameters. These parameters are then passed to the function that communicates with the database. This function asks the database to filter out all the toys where the toyType is 'dolls' and the color is 'pink'. The filtered data is returned to you, showing all toys that match the specified criteria.

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

Filter Data Using Query Parameters

Now that we understand what query parameters are and how they work, let's talk about implementing them in our Express.js routes.

We are going to imitate our toy store scenario. We have our mock dataset, a list of toys, each with a name, type, color, and price. Assume toysData is an array of toy objects like: [ { toyType: 'dolls', color: 'pink' }, { toyType: 'cars', color: 'red' }, ...]. Our task is to create a route that handles this data based on the query parameters passed in the request.

Before we filter, let’s see how we can access query parameters in our route.

First, require express and create an instance of an Express application:

JavaScript

const express = require('express');
const app = express();

const express = require('express');
const app = express();

Next, let's define our sample data, which is an array of toy objects:

JavaScript

const toysData = [
    { toyType: 'dolls', color: 'pink' },
    { toyType: 'cars', color: 'red' },
    // Add more toy objects here
];

const toysData = [
    { toyType: 'dolls', color: 'pink' },
    { toyType: 'cars', color: 'red' },
    // Add more toy objects here
];

Now, create a route that will handle GET requests to /toys, retrieve query parameters, and filter the data accordingly:

JavaScript

app.get('/toys', (req, res) => {
    const { toyType, color } = req.query;
    let filteredToys = toysData;

    if (toyType) {
        filteredToys = filteredToys.filter(toy => toy.toyType === toyType);
    }

    if (color) {
        filteredToys = filteredToys.filter(toy => toy.color === color);
    }

    res.json(filteredToys);
});

app.get('/toys', (req, res) => {
    const { toyType, color } = req.query;
    let filteredToys = toysData;

    if (toyType) {
        filteredToys = filteredToys.filter(toy => toy.toyType === toyType);
    }

    if (color) {
        filteredToys = filteredToys.filter(toy => toy.color === color);
    }

    res.json(filteredToys);
});

In this code example:

We check if our query parameters contain toyType or color.
If they do, we filter our data based on these values.
When both parameters are present (e.g., http://localhost:3000/toys?toyType=dolls&color=pink), the data is filtered to return only the toys that fulfill both conditions simultaneously.

This step-by-step breakdown allows us to clearly see how query parameters are used to filter data in an Express.js route handler.

Topic Overview and Actualization

Defining Query Parameters

How Query Parameters Work

Join the 1M+ learners on CodeSignal

Filter Data Using Query Parameters

Quick Checker

Lesson Summary and Next Steps