Filter values from Object Arrays in JavaScript

Lakshmi Ramasamy 13th May 2020 Leave a Comment

In this tutorial, we will learn how to use the JavaScript Array filter() method to filter elements in an array. The filter() method executes the function and return the new array only the original array that passes the condition provided. This doesn’t change the original array.

Lets consider the below object array for our understanding.

let students= [
    {name: 'Lokesh', grade: 'A', section : 'A'},
    {name: 'Ablilash', grade: 'C', section: 'A'},
    {name: 'Harry', grade: 'A', section: 'B'},
    {name: 'Potter', grade: 'B', section: 'D'},
    {name: 'John', grade: 'D', section: 'C'}
];

To extract an element from an array, we typically loop over the array using for loop, like the below:

let aSecStud= [];
for (let i = 0; i < students.length; i++) {
    if (students[i].section === 'A') {
        aSecStud.push(students[i]);
    }
}
console.log(aSecStud);

Output

[
{name: 'Lokesh', grade: 'A', section : 'A'},
{name: 'Ablilash', grade: 'C', section: 'A'}
]

In ECMAScript 5, filter() method makes the array extract easier. An array containing all the array elements that pass the test. If no elements pass the test it returns an empty array.

let aSecStud= students.filter(function (e) {
    return students.section === 'A';
});
console.log(aSecStud);

In Next Version Of Javascript ES6, It is even cleaner when you use the arrow function (=>).

let aSecStud = students.filter(stud=> stud.section === 'A');
console.log(aSecStud);

Internally, the filter() method iterates over each element of the array and passes each element to the callback function. If the callback function returns true, it includes the element in the return array.

Syntax

array.filter(function(currentValue, index, arr), thisValue)

Parameter	Description
currentValue	current element in the array that is being processed by the callback function.
index	Index of the currentValue. Optional
arr	object being traversed. Optional
thisValue	Referred as contextObject(Optional). If you pass this argument you can access using this keyword.

Example

function upperRange(value) {
       return value.grade === this.upper;
}

function lowerRange(value) {
       return value.grade === this.lower;
}

let range = {
    lower: 'D',
    upper: 'A'
};

let upperGrade= students.filter(upperRange, range);
Let lowerGrade =  students.filter(lowerRange, range);
console.log('Upper Grade Students:\n', upperGrade); 
console.log('Lower Grade Students:\n', lowerGrade );

Output

Upper Grade Students:
[
  {name: 'Lokesh', grade: 'A', section : 'A'},
  {name: 'Harry', grade: 'A', section: 'B'}
]
Lower Grade Students:
[
   {name: 'John', grade: 'D', section: 'C'}
]