Skip to content
Related Articles
Open in App
Not now

Related Articles

How to group objects in an array based on a common property into an array of arrays in JavaScript ?

Improve Article
Save Article
  • Last Updated : 21 Dec, 2022
Improve Article
Save Article

In this article, we will try to understand how we may easily group objects in an array based on a common property into an array of arrays in JavaScript with the help of an example itself.

Let us first try to understand how we may create an array containing multiple objects using the below-enlightened syntax.

Syntax: The following syntax will help us to understand how we may easily create an array containing multiple objects:

let array_with_multiple_objects = [
    {
        property_name: value,
        ...
    },
    {
        property_name: value,
        ...
    },
    ...
]

Now that we have seen the above syntax for creating an array with multiple objects, let us have a quick look at the following example which will help us to understand the above syntax more clearly.

Approach 1: In this approach, we will create an array having multiple objects in itself and then use Array.filter() method we will filter out certain values from that complete array of objects.

Example:

Javascript




<script>
    let fruits = [
        {
            fruit_name: "Apple",
            fruit_color: "Red",
        },
        {
            fruit_name: "Pomegranate",
            fruit_color: "Red",
        },
        {
            fruit_name: "Grapes",
            fruit_color: "Green",
        },
        {
            fruit_name: "Kiwi",
            fruit_color: "Green",
        },
    ];
    let filtered_fruits = fruits.filter((fruit) =>
        fruit.fruit_color === "Red");
    console.log(filtered_fruits);
</script>

Output:

[
    { fruit_name: 'Apple', fruit_color: 'Red' },
    { fruit_name: 'Pomegranate', fruit_color: 'Red' }
]

Now that we have seen the complete execution in the previous example, let us now have a direct look over our problem statement and its solution shown in the below example itself:

Approach 2: 

  • In this approach, we will use the same array containing multiple objects which we have created previously, and here we will create another function that will be responsible for containing our logic for the above-enlightened problem statement.
  •  Then the first part of our logic will be using Object.values() method that will actually accumulate all the object values for us and just after that we will use Array.reduce() method which will reduce our array into objects and then using nullish coalescing operator (??) we will either add the property value inside the accumulator value (part of reduce method) or we will add an empty array instead of it ([ ]). 
  • The second part of our logic says that we have to push the current value inside the accumulator value itself that contains the previously added value in it and then at the end, we will return the accumulator value itself.

Example:

Javascript




<script>
    let fruits = [
        {
            fruit_name: "Apple",
            fruit_color: "Red",
        },
        {
            fruit_name: "Pomegranate",
            fruit_color: "Red",
        },
        {
            fruit_name: "Grapes",
            fruit_color: "Green",
        },
        {
            fruit_name: "Kiwi",
            fruit_color: "Green",
        },
    ];
 
    let groupingViaCommonProperty = Object.values(
        fruits.reduce((acc, current) => {
            acc[current.fruit_color] = acc[current.fruit_color] ?? [];
            acc[current.fruit_color].push(current);
            return acc;
        }, {})
    );
    console.log(groupingViaCommonProperty);
</script>

Output:

[
    [
        { fruit_name: 'Apple', fruit_color: 'Red' },
        { fruit_name: 'Pomegranate', fruit_color: 'Red' }
    ],
    [
        { fruit_name: 'Grapes', fruit_color: 'Green' },
        { fruit_name: 'Kiwi', fruit_color: 'Green' }
    ]
]

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!