How to filter an array of objects in ES6 ? - GeeksforGeeks

12 Jan, 2022
In this article, we will try to understand how we could filter out or separate out certain data from the array of objects in ES6.
Let us first to understand how we could create an array of object by following certain syntax provided by JavaScript.
Array of Objects:
The array of object helps any user to store multiple value in a single variable.
It actually stores a fixed-sized collection of sequentially accessed and that too of same type.
By using following syntax we could easily make an array of multiple objects.
Syntax:
By using the following syntax, we could create an array of object with ease.
let array_of_objects = [
{ property-name: value},
{ property-name: value},
.........
]
Let us look at the following example for a better understanding of how to create an array of objects.
Example:
Javascript
<script>  let people_details = [    {name: "ABC", age: 18},    {name: "GeeksforGeeks", age: 30},    {name: "DEF", age: 50},  ];  console.log(people_details);</script>
The output of the above code snippet would be as follows:
[
  { name: 'ABC', age: 18 },
  { name: 'GeeksforGeeks', age: 30 },
  { name: 'DEF', age: 50 }
]
Now that we have understood the concept of creating an array of objects, let us now see how to we could filter out some data based on user requirements from the array of objects.
filter() method:
Following sequentially ordered points will depict our above-illustrated task-
For filtering out contents from the array of objects we would be using at first the filter() method which we would be applying on our outermost array part.
Inside that method, we would be passing a function that would execute on all of the objects present inside an array, and to access each of those objects we would be using an element of any name for the purpose of accessing those objects present inside that array.
Then afterward based on the user’s requirement the data from that array of objects will be filtered out and could be displayed if required.
Example 1:
Javascript
<script>  let people_details = [    {name: "ABC", age: 18},    {name: "GeeksforGeeks", age: 30},    {name: "DEF", age: 50},  ];  console.log(people_details);    let data = people_details.filter(    element => element.age >= 30);  console.log(data);</script>
The output of the above code snippet would be as follows:
[
  { name: 'ABC', age: 18 },
  { name: 'GeeksforGeeks', age: 30 },
  { name: 'DEF', age: 50 }
]

[ 
    { name: 'GeeksforGeeks', age: 30 }, 
    { name: 'DEF', age: 50 } 
]
Example 2:
In this example, we will use the filter() method for filtering out the blood group data which is required by the user as the end result.
There also we will use && logical operator by providing both the conditions which is age should be greater than 18 as well as the blood group required is B+.
Javascript
</script>  let blood_groups_data = [    { name: "ABC", age: 19, blood_group: "B+" },    { name: "DEF", age: 20, blood_group: "AB+" },    { name: "JOHN", age: 25, blood_group: "A+" },    { name: "APPLE", age: 45, blood_group: "B+" },    { name: "PETER", age: 48, blood_group: "AB-" },    { name: "JAMES", age: 53, blood_group: "B+" },  ];    console.log(blood_groups_data);    let blood_group_required_data = blood_groups_data.filter(    (person) => person.age > 18 && person.blood_group === "B+"  );  console.log(blood_group_required_data);</script>
The output of the above code snippet would be as follows:
[
  { name: 'ABC', age: 19, blood_group: 'B+' },
  { name: 'DEF', age: 20, blood_group: 'AB+' },
  { name: 'JOHN', age: 25, blood_group: 'A+' },
  { name: 'APPLE', age: 45, blood_group: 'B+' },
  { name: 'PETER', age: 48, blood_group: 'AB-' },
  { name: 'JAMES', age: 53, blood_group: 'B+' }
]

[
  { name: 'ABC', age: 19, blood_group: 'B+' },
  { name: 'APPLE', age: 45, blood_group: 'B+' },
  { name: 'JAMES', age: 53, blood_group: 'B+' }
]
kapoorsagar226
ES6
javascript-array
JavaScript-Questions
Picked
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Difference between var, let and const keywords in JavaScript
Difference Between PUT and PATCH Request
JavaScript | Promises
How to get character array from string in JavaScript?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript