To filter an array of objects based on a property in JavaScript –
- Use the Array.filter() method. The Array.filter() method accepts a callback function which is called for each element in the array. If the callback returns true, the element is included in the filtered array, otherwise it is excluded.
- Use the Array.find() method. The Array.find() method accepts a callback function which is called for each element in the array until it returns true, at which point find() returns the value of that element.
- Use a for loop. You can filter an array of objects by looping through each element and returning only the elements where the callback returns true.
- Use a forEach loop. You can filter an array of objects by looping through each element and returning only the elements where the callback returns true.
Let’s look at each of these methods in turn.
Array.filter() Method
The Array.filter() method is the most straightforward way to filter an array of objects based on a property in JavaScript. The callback function accepts each element in the array as an argument and returns true or false depending on whether the element should be included in the filtered array.
In the following example, we have an array of objects representing different people. Each object has a name and age property:
const people =
[ {name: ‘John’, age: 34},
{name: ‘Mike’, age: 15},
{name: ‘Mary’, age: 27}];We can use the Array.filter() method to filter the array based on the age property:
const filteredPeople = people.filter(person => person.age >= 18);
console.log(filteredPeople);
// Output:
// {name: ‘John’, age: 34},
// {name: ‘Mary’, age: 27}In the example above, we created a callback function that checks if the person.age property is greater than or equal to 18. The Array.filter() method then iterates through each element in the array and calls the callback function for each one.
If the callback returns true, the element is included in the filtered array, if it returns false, it is excluded.
You can use a conditional statement to check if the filter returned atleast one element:
if(filteredPeople.length > 0) {
// Do something here
}Array.find() Method
The Array.find() method is similar to the Array.filter() method, but instead of returning an array of all elements that match the condition, it returns only the first element that satisfies the condition.
In the following example, we have an array of objects representing different people. Each object has a name and age property:
const people =
{name: ‘John’, age: 34},
{name: ‘Mike’, age: 15},
{name: ‘Mary’, age: 27}];We can use the Array.find() method to find the first object in the array where the age property is greater than or equal to 18:
const person = people.find(person => person.age >= 18);
console.log(person);
// Output:
// {name: ‘John’, age: 34}In the example above, we created a callback function that checks if the person.age property is greater than or equal to 18. The Array.find() method then iterates through each element in the array and calls the callback function for each one.
When the callback returns true for the first time, find() immediately returns the value of that element (in this case, {name: ‘John’, age: 34}).
You can use a conditional statement to check if the find() method returned an element:
if(person !== ‘undefined’) {
// Do something here
}For Loop
You can also filter an array of objects by looping through each element and returning only the elements where the callback returns true. In the following example, we have an array of objects representing different people. Each object has a name and age property:
const people =
[{name: ‘John’, age: 34},
{name: ‘Mike’, age: 15},
{name: ‘Mary’, age: 27}];We can use a for loop to filter the array based on the age property:
const filteredPeople = [];
for(let i=0; i < people.length; i++) {
if(people[i].age >= 18) {
filteredPeople.push(people[i]);
}
}
console.log(filteredPeople);
// Output:
// {name: ‘John’, age: 34},
// {name: ‘Mary’, age: 27}In the example above, we loop through each element in the array and check if the age property is greater than or equal to 18. If it is, we add the element to a new array.
You can use a conditional statement to check if the filter returned atleast one element:
if(filteredPeople.length > 0) {
// Do something here
}Please note that the for loop method is not as efficient as the Array.filter() or Array.find() methods, and should only be used if you are targeting older browsers that do not support those methods.
forEach() Loop
You can also use the forEach() loop to filter an array of objects. The forEach() loop calls a callback function once for each element in an array.
In the following example, we have an array of objects representing different people. Each object has a name and age property:
const people =
[{name: ‘John’, age: 34},
{name: ‘Mike’, age: 15},
{name: ‘Mary’, age: 27}];We can use the forEach() loop to filter the array based on the age property:
const filteredPeople = [];
people.forEach(person => {
if(person.age >= 18) {
filteredPeople.push(person);
}
});
console.log(filteredPeople);
// Output:
// {name: ‘John’, age: 34},
// {name: ‘Mary’, age: 27}In the example above, we loop through each element in the array and check if the age property is greater than or equal to 18. If it is, we add the element to a new array.
You can use a conditional statement to check if the filter returned atleast one element:
if(filteredPeople.length > 0) {
// Do something here
}Please note that the forEach() loop method is not as efficient as the Array.filter() or Array.find() methods, and should only be used if you are targeting older browsers that do not support those methods.
Conclusion – Filter An Array Of Objects Based On A Property In JavaScript
In this article, we looked at how to filter an array of objects based on a property in JavaScript.
We saw how to use the Array.filter() method as well as how to use a for loop or forEach() loop to achieve the same result.
Finally, we saw how to use a conditional statement to check if the filter returned atleast one element.
Do you have any questions? Leave a comment below.