JavaScript Filter Array of Objects by Value

When we work with data, filtering an array of objects is a common operation. If we use this we can retrieve a subset of data that matches a certain criteria. In this article, we will see how to filter an array of objects by value in javascript.

For example, Suppose we have all student detail data in an array of objects. You may want to retrieve all students in an array that have marks higher than 80, or age lower than 18. In such cases, filtering the array based on value can help achieve this task in a simple and efficient manner.

Most of the developers commonly use ‘Array.filter() method’ to create a new array that contains only the objects that meet a specified criterion. We can give an argument as a callback function that determines whether an object should be included in the new array or not. If the callback function returns true, the object is included, otherwise it is excluded.

Easy Ways to filter array of Objects by Value

1. filter() method:

The filter() method creates a new array with all elements, we can pass the test implemented by the provided function. It returns a boolean value (either true or false). For each element in the array, the function is called with the element as an argument. If it returns true, the element is included in the new array. If it returns false, the element is excluded. The filter() method does not modify the original array.

Here’s an example of using filter() to get an array of objects where the age property is greater than equals 18 and mark property is greater than 85:

const student = [
  { name: 'John', age: 15, mark:80 },
  { name: 'Bob',  age: 18, mark:89 },
  { name: 'Rose', age: 15, mark:70 },
  { name: 'Steve', age: 19, mark:92 }
];

const result = student.filter(person => 
             person.age >= 18 && person.mark > 85 );

console.log(result);

// Output: [{name: ‘Bob’, age: 18, mark: 89},{name: ‘Steve’, age: 19, mark: 92}]

2. reduce() method

We can apply a function using reduce() against an accumulator and each element in the array to reduce it to a single value. We can give two arguments (which start with the initial value, or the first element of the array if no initial value is provided) and the current element of the array. Once all the elements in the array have been processed, this function returns the updated accumulator value

Here, we filter out those less than equals 18 age && name is equal to ‘john’ in the ‘Student’ array using reduce() method.

const student = [
  { name: 'John', age: 15, mark:80 },
  { name: 'Bob',  age: 18, mark:89 },
  { name: 'Rose', age: 15, mark:70 },
  { name: 'Steve', age: 19, mark:92 }
];

const result = student.reduce((accumulator, person) => {
  if (person.age <= 18 && person.name == 'John') {
    accumulator.push(person);
  }
  return accumulator;
}, []);

console.log(result);

// Output: [{name: ‘John’, age: 15, mark: 80}]

3. Using forEach() method

We can give three arguments in the forEach() function: the current element of the array, the index of the current element, and the array itself. In this method, it does not modify the original array. It returns the array of object properties corresponding to the condition.

Here, we filter out those below 80 marks in the ‘Student’ array:

const student = [
  { name: 'John', age: 15, mark:80 },
  { name: 'Bob',  age: 18, mark:89 },
  { name: 'Rose', age: 15, mark:70 },
  { name: 'Steve', age: 19, mark:92 }
];

const result = [];

student.forEach(person => {
  if (person.mark < 80) {
    result.push(person);
  }
});

console.log(result);

// Output: [{name: ‘Rose’, age: 15, mark: 70}]

Conclusion

Hope this article helps you! Let me know if you have any doubts.