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;
})
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);