Skip to content
Related Articles

Related Articles

How to filter an array of objects in ES6 ?

Improve Article
Save Article
  • Last Updated : 28 May, 2022
Improve Article
Save Article

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 } 
]

Time complexity: O(n) 

Auxiliary Space: O(1)

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

Time complexity: O(n) 

Auxiliary Space: O(1)


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!