🎉 Everything is free here. Read more →
Tutorial
Project Tutorial
xamtrack
Filtration & Searching Functionality

Filtration & Searching with Query Props

Add Filtration & Searching Functionality with Query Props

▶️ Problem Statement

If you want to filter the data based on a specific field, you can use the query props. For example, if you want to filter the data based on the status field, you can use the following code:

const getAllTasksTesting = async(req, res) => {
    const myData = await Task.find({status: "incomplete"});
    res.status(200).json({ myData });
  };

But If I don't use the query props, inside the getAllTasksTesting function,and then search on the http://localhost:5000/api/tasks/testing?"status=incomplete URL, I will get all the data from the database instead of the filtered data.

without query props
 
const getAllTasksTesting = async(req, res) => {
    const myData = await Task.find({});
    res.status(200).json({ myData });
  };

image

▶️ What is req.params, req.query and req.body in Express.js?

These three, req.body, req.query and req.params are part of Express request object. They are used by the client to send data to the server. This post outlines their differences and gives examples on how to use them.

1. req.body

Generally used in POST/PUT requests. Use it when you want to send sensitive data(eg. form data) or super long JSON data to the server.

How to send data in request body

  • using curl
curl -d '{"key1":"value1", "key2":"value2"}' -H "ContentType: application/json" -X POST http://localhost:3000/giraffe
  • using axios
axios.post('/giraffe', {
    key1: 'value1',
    key2: 'value2'
  })
  .then(response => {
    ...
  })
  .catch(error => {
    ...
})

How to get data from request body

  app.get('/giraffe', (req, res) => {
   console.log(req.body.key1) //value1
   console.log(req.body.key2) //value2
  })

Remember to use express.json() middleware to parse request body else you'll get an error

app.use(express.json())

2. req.params

These are properties attached to the url i.e named route parameters. You prefix the parameter name with a colon(:) when writing your routes.

For instance,

  app.get('/giraffe/:number', (req, res) => {
   console.log(req.params.number)
  })

To send the parameter from the client, just replace its name with the value

  GET  http://localhost:3000/giraffe/1

3. req.query

req.query is mostly used for searching,sorting, filtering, pagination, e.t.c Say for instance you want to query an API but only want to get data from page 10, this is what you'd generally use. It written as key=value

  GET  http://localhost:3000/animals?page=10

To access this in your express server is pretty simple too;

  app.get('/animals', ()=>{
   console.log(req.query.page) // 10
  })

▶️ req.query use

Whenever someone send a request that will automatically put inside the find function, and then we can use the query props to filter the data based on the specific field.

with query props
 
    const myData = await Task.find(req.query);
 
    console.log("User searched for: ", req.query);

Simple pass the req.query inside the find function in task.js file.

  1. Start the server by running npm run dev in the terminal.

  2. Open the browser and go to http://localhost:5000/api/tasks/testing?status=incomplete URL.

  3. You will get the filtered data based on the status field.

  4. Also you can see the User searched for: { status: 'incomplete' } in the terminal.

    example

    Change the image size by using the click-and-scroll function.

❗️

It's mostly use for searching, sorting, filtering, pagination, e.t.c

If there are multiple one, they are separated by an ampersand (&).

  GET  http://localhost:3000/animals?page=10&color=red
example

Change the image size by using the click-and-scroll function.

Read Data from DatabaseImprove Filter in API