When you need to filter an array with multiple values or criteria, you can use the .filter() and write multiple validations in the callback function.
If you need a reminder on the filter method, here’s a quick introduction. Otherwise, Let’s see an example of multiple filters in action.
Let’s say you have an array of numbers as follows:
let numbers = [3, 7, 2, 15, 4, 9, 21, 14];
You want to filter the numbers to include only those higher than 3 and lower than 17.
Here’s how you do it with .filter():
let numbers = [3, 7, 2, 15, 4, 9, 21, 14];
let filteredNumbers = numbers.filter(function (currentElement) {
return currentElement > 3 && currentElement < 17;
});
console.log(filteredNumbers);
The value of filteredNumbers will be [7, 15, 4, 9, 14]
As long as you return either true or false, you can create as many validation logic as you need inside the callback function of filter. You can also write the previous filter as follows:
let numbers = [3, 7, 2, 15, 4, 9, 21, 14];
let filteredNumbers = numbers.filter(function (currentElement) {
if (currentElement > 3 && currentElement < 17) {
return true;
}
});
console.log(filteredNumbers);
When the filter callback function doesn’t return true, the currentElement won’t be pushed into the resulting array.
Filter array of objects with multiple values
You can filter an array of objects by testing whether the properties match a certain set of criteria.
Let’s see another example. Let’s say you have a list of people data as follows:
let people = [
{
name: "Steve",
age: 27,
country: "America",
},
{
name: "Linda",
age: 23,
country: "Germany",
},
{
name: "Jimena",
age: 29,
country: "Spain",
},
{
name: "Eric",
age: 24,
country: "England",
},
{
name: "Jacob",
age: 24,
country: "America",
},
];
Now you need to filter the data to only include those from America and age below 25. Here’s how you do it:
let filteredPeople = people.filter(function (currentElement) {
// the current value is an object, so you can check on its properties
return currentElement.country === "America" && currentElement.age < 25;
});
console.log(filteredPeople);
Only the last element will match the filter:
{name: "Jacob", age: 24, country: "America"}
More on JavaScript:
