How to filter array of objects in ES6 JavaScript

In this post, we are going to learn how to filter array of objects in ES6 JavaScript.The array. filter() method is used to filter the data from an array of objects. The array. filter() method returns a new array with all elements that pass the given conditions set by a callback function.

1. Filter array of objects based on Mutiple Conditions


In this example, we will learn how to filter an array of objects based on multiple conditions by using an array.filter() method in which callback function is running on each element of the array and returns a new resulting array of the elements which passed the condition implemented by a callback function

  • In this example using condition, where emp.salary > 40000 && emp.Empname===’Max’&& emp.Dep===’IT’.
  • We are passing condition by passing an anonymous function(a function without a name) as a callback function.

let Employee = {'Empdetails':[
    {Empname: 'John', salary: 60000,EmpID:1,Dep:'Admin'},
    {Empname: 'jack', salary: 50000,EmpID:2,Dep:'IT'},
    {Empname: 'Racx', salary: 60000,EmpID:4,Dep:'IT'},
    {Empname: 'Max', salary: 70000,EmpID:5,Dep:'IT'},
    {Empname: 'Robin', salary: 80000,EmpID:5,Dep:'IT'}

  ]};


let FilterArrObj = Employee.Empdetails.filter(emp=> 
{
 return emp.salary > 40000 && emp.Empname==='Max'&& emp.Dep==='IT';
});

console.log(FilterArrObj)

Output

[ { Empname: 'Max', salary: 70000, EmpID: 5, Dep: 'IT' } ]

2. Filter array of objects based on attributes


In this example, we will learn how to filter based on attributes. We have filtered the given array of objects ‘Employee’ Where salary is greater than 40000 and dep is admin by using an array.filter() method.

let Employee = {'Empdetails':[
    {Empname: 'John', salary: 60000,EmpID:1,Dep:'Admin'},
    {Empname: 'jack', salary: 50000,EmpID:2,Dep:'IT'},
    {Empname: 'Racx', salary: 60000,EmpID:4,Dep:'IT'},
    {Empname: 'Max', salary: 70000,EmpID:5,Dep:'IT'},
    {Empname: 'Robin', salary: 80000,EmpID:5,Dep:'IT'},

  ]};


let FilterArrObj = Employee.Empdetails.filter(function (e) {
 return (e.salary > 40000 && e.Dep ==='Admin');

})

console.log(FilterArrObj)

Output

[ { Empname: 'John', salary: 60000, EmpID: 1, Dep: 'Admin' } ]

3. Filter array of object by value


In this example, we are filtering an array of objects by given values empid = [1,2,5] by using array.filter() method

let Employee = {'Empdetails':[
    {Empname: 'John', salary: 60000,EmpID:1,Dep:'Admin'},
    {Empname: 'jack', salary: 50000,EmpID:2,Dep:'IT'},
    {Empname: 'Racx', salary: 60000,EmpID:4,Dep:'IT'},
    {Empname: 'Max', salary: 70000,EmpID:5,Dep:'IT'},
    {Empname: 'Robin', salary: 80000,EmpID:6,Dep:'IT'},

  ]};

var empIds = [1,2,5]


var filterArrObj = Employee.Empdetails.filter(function(ele){
  return empIds.indexOf(ele.EmpID) > -1;
});

console.log(filterArrObj)



//by using include() method

var filterArrObj1 = Employee.Empdetails.filter(emp =>empIds.includes(emp.EmpID));
  
console.log('\n Using include Method:',filterArrObj1)

Output

[
  { Empname: 'John', salary: 60000, EmpID: 1, Dep: 'Admin' },
  { Empname: 'jack', salary: 50000, EmpID: 2, Dep: 'IT' },
  { Empname: 'Max', salary: 70000, EmpID: 5, Dep: 'IT' }
]


Using include Method: 

[
  { Empname: 'John', salary: 60000, EmpID: 1, Dep: 'Admin' },
  { Empname: 'jack', salary: 50000, EmpID: 2, Dep: 'IT' },
  { Empname: 'Max', salary: 70000, EmpID: 5, Dep: 'IT' }
]

4. Filter array of objects by key value


In this example we have an array of objects in which a key(Dep) contains key-value pair, We will use an array.filter() method based on key-value pair with the array.includes() method.

let Employee = {'Empdetails':[
    {Empname: 'John', salary: 60000,EmpID:1,Dep:['Dep:Admin']},
    {Empname: 'jack', salary: 50000,EmpID:2,Dep:['Dep:HR']},
    {Empname: 'Racx', salary: 60000,EmpID:4,Dep:['Dep:IT']},
    {Empname: 'Max', salary: 70000,EmpID:5,Dep:['Dep:Admin']},
    {Empname: 'Robin', salary: 80000,EmpID:6,Dep:['Dep:IT']},

  ]};



const Empdetails = Employee.Empdetails.filter(emp => {
  return emp.Dep.includes('Dep:Admin');
});

console.log(Empdetails)

Output

[
  { Empname: 'John', salary: 60000, EmpID: 1, Dep: [ 'Dep:Admin' ] },
  { Empname: 'Max', salary: 70000, EmpID: 5, Dep: [ 'Dep:Admin' ] }
]

5. Fillter array of object based on single value


To filter an array of objects based on a single value, We can use OR operator(||) or array.find() methods that we are doing in the below example.

let Employee = {'Empdetails':[
    {Empname: 'John', salary: 60000,EmpID:1,Dep:'Admin'},
    {Empname: 'jack', salary: 50000,EmpID:2,Dep:'IT'},
    {Empname: 'Racx', salary: 60000,EmpID:4,Dep:'IT'},
    {Empname: 'Max', salary: 70000,EmpID:5,Dep:'IT'},
    {Empname: 'Robin', salary: 80000,EmpID:6,Dep:'IT'}

  ]};



//using Find() function
const FilterArrObj = Employee.Empdetails.find(emp => {
  return emp.Empname === 'Racx';
});
console.log(FilterArrObj)



//using or operator
const FilterArrObj1 = Employee.Empdetails.find(emp => {
  return (emp.Empname === 'Racx'||emp.Dep ==='Admin');
});
console.log(FilterArrObj1)

Output

{ Empname: 'Racx', salary: 60000, EmpID: 4, Dep: 'IT' }
{ Empname: 'John', salary: 60000, EmpID: 1, Dep: 'Admin' }

6. Filter array of objects by another array of objects


Sometimes we have to filter an array of objects by another array of objects. First, we have used an array.some() method to filter the array of an object by using a callback function and later filter using an array.filter() method.

let Employee = {'Empdetails':[
    {Empname: 'John', salary: 60000,EmpID:1,Dep:'Admin'},
    {Empname: 'jack', salary: 50000,EmpID:2,Dep:'IT'},
    {Empname: 'Racx', salary: 60000,EmpID:4,Dep:'IT'},
    {Empname: 'Max', salary: 70000,EmpID:5,Dep:'IT'},
    {Empname: 'Robin', salary: 80000,EmpID:6,Dep:'IT'}

  ]};


//array of object to filter 

const myFilter = [ {Empname: 'John', salary: 60000,EmpID:1,Dep:'Admin'},{Empname: 'Max', salary: 70000,EmpID:5,Dep:'IT'}];



const FilterObj = Employee.Empdetails.filter((el) => {
  return myFilter.some((f) => {
    return f.Empname === el.Empname && f.salary === el.salary;
  });
});

console.log(FilterObj)

Output

[
  { Empname: 'John', salary: 60000, EmpID: 1, Dep: 'Admin' },
  { Empname: 'Max', salary: 70000, EmpID: 5, Dep: 'IT' }
]