CODEWITHSUNDEEP
javascriptarraysreactjsreact-nativefilter
amazing
amazing

Reputation: 191

Filter multiple properties and values in js/react

I want to be able to filter by status and priority, but also be able to have multiple types of priority or status, for example:

[
  {
    "id": 1,
    "status": "IN_PROGRESS",
    "priority": "NONE",
    "inspectorId": 2,
    "reportAt": "2021-08-09T12:06:03+00:00",
    "scheduledFor": "2021-08-12T12:06:03+00:00",
  },
  {
    "id": 2,
    "status": "WAITING",
    "priority": "HIGH",
    "inspectorId": 2,
    "reportAt": "2021-08-09T12:06:03+00:00",
    "scheduledFor": "2021-08-12T12:06:03+00:00",
  },
  {
    "id": 3,
    "status": "COMPLETED",
    "priority": "NONE",
    "inspectorId": 2,
    "reportAt": "2021-08-09T12:06:03+00:00",
    "scheduledFor": "2021-08-12T12:06:03+00:00",
  },
]

I'm currently using .filter to filter with the value I pick, but whenever I pick more than one value for the same property ("WAITING" & "IN_PROGRESS" for status) I get an empty array as a return.

Here's my code:

allRequests.filter((item) => {
  if (filters !== {}) {
    for (const key in filters) {
      if (item[key] === undefined || item[key] != filters[key]) {
        return null;
      }
    }
  }
  return item;
})

Upvotes: 1

Views: 1005

Answers (1)

Rimaz Mohommed
Rimaz Mohommed

Reputation: 1394

Javascript array.filter expects a predicate function, and returns a filtered set of array items based on that predicate function.

Instead of returning an item you need to return a boolean of either true or false. This might be why you are facing this issue.

To filter by multiple statuses & priorities create a filters object like follows :

      const filters = {
          "status": ["COMPLETED", "IN_PROGRESS"],
          "priority": ["NONE"]
      };

then update your code to :

        allRequests.filter((item) => {
          if (Object.keys(filters).length > 0) {
            for (let key in filters) {
              if (item[key] === undefined || !filters[key].includes(item[key])) {
                return false;
              }
            }
          }
          return true;
        })

see :

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

https://zetcode.com/javascript/array-filter/

You can find a working example below :

const allRequests = [
            {
              "id": 1,
              "status": "IN_PROGRESS",
              "priority": "NONE",
              "inspectorId": 2,
              "reportAt": "2021-08-09T12:06:03+00:00",
              "scheduledFor": "2021-08-12T12:06:03+00:00",
            },
            {
              "id": 2,
              "status": "WAITING",
              "priority": "HIGH",
              "inspectorId": 2,
              "reportAt": "2021-08-09T12:06:03+00:00",
              "scheduledFor": "2021-08-12T12:06:03+00:00",
            },
            {
              "id": 3,
              "status": "COMPLETED",
              "priority": "NONE",
              "inspectorId": 2,
              "reportAt": "2021-08-09T12:06:03+00:00",
              "scheduledFor": "2021-08-12T12:06:03+00:00",
            },
          ];

const filters = {
  "status": ["COMPLETED", "IN_PROGRESS"],
  "priority": ["NONE"]
};

const result = allRequests.filter((item) => {
          if (Object.keys(filters).length > 0) {
            for (let key in filters) {
              if (item[key] === undefined || !filters[key].includes(item[key])) {
                return false;
              }
            }
          }
          return true;
        });
        
console.log(result);

Upvotes: 3

Related Questions