How to filter an array of objects in ES6 ?

In this article, we will try to understand how we could filter out or separate certain data from the array of objects in ES6.

Let us first try to understand how we could create an array of objects by following certain syntax provided by JavaScript.

Javascript Array of Objects:

• The array of objects helps any user to store multiple values in a single variable.
• It actually stores a fixed-sized collection of sequentially accessed and that too of the same type.
• By using the following syntax we could easily make an array of multiple objects.

Syntax: By using the following syntax, we could create an array of objects 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: In this example, we will create a basic array in Javascript.

Javascript

<script>
    let people_details = [
      {name: "ABC", age: 18},
      {name: "GeeksforGeeks", age: 30},
      {name: "DEF", age: 50},
    ];
    console.log(people_details);
</script>

Output:

[
  { 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 we could filter out some data based on user requirements from the array of objects.

Javascript filter() Method: The 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: In this example, we will implement a basic filter() method which will filter the age of the object.

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>

Output:

[
  { 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 the 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>

Output:

[
  { 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+' }
]