How to Separate Array of Objects into Multiple Objects in JavaScript ?

In JavaScript, the task of separating an array of objects into multiple objects involves organizing and restructuring data based on specific criteria or properties. This process is often necessary when dealing with datasets that need to be grouped or segmented for easier analysis or manipulation.

There are various methods to achieve this separation which are as follows

Using Array.prototype.reduce

The reduce method is used to separate an array of objects into multiple objects based on a specified property. This method initializes an empty object as an accumulator and iterates through the array, grouping objects by the specified property. It checks whether a property value exists in the accumulator, creating a new array for that value if it doesn't, and then appends the current object to that array.

Example: In this, the reduce function iterates over the array and groups fruits based on the category.

// Array of objects

const array = [
    { id: 1, category: "A", value: "apple" },
    { id: 2, category: "B", value: "banana" },
    { id: 3, category: "A", value: "avocado" },
];

const groupedObjects = array.reduce((result, obj) => {
    (result[obj.category] = result[obj.category] || []).push(obj);
    return result;
}, {});

// Output
console.log(groupedObjects);

{
  A: [
    { id: 1, category: 'A', value: 'apple' },
    { id: 3, category: 'A', value: 'avocado' }
  ],
  B: [ { id: 2, category: 'B', value: 'banana' } ]
}

Using Array.prototype.forEach

The forEach method is utilised to achieve object separation by iterating over the array of objects. It maintains an empty object to store the grouped objects, and for each object in the array, it checks whether an array for the specific property exists in the accumulator. If not, a new array is created, and the object is appended to it.

Example: In this, the for-each categories for-each categories loop is used to iterate over the array and group fruits based on the category.

// Array of objects
const array = [
    { id: 1, category: "A", value: "apple" },
    { id: 2, category: "B", value: "banana" },
    { id: 3, category: "A", value: "avocado" },
    // ... more objects here
];

const groupedObjects = {};

array.forEach((obj) => {
    groupedObjects[obj.category] =
        groupedObjects[obj.category] || [];
    groupedObjects[obj.category].push(obj);
});

console.log(groupedObjects);

{
  A: [
    { id: 1, category: 'A', value: 'apple' },
    { id: 3, category: 'A', value: 'avocado' }
  ],
  B: [ { id: 2, category: 'B', value: 'banana' } ]
}

Using Map data structure

The map data structure is used to create a mapping between property values and arrays of objects. The array is traversed using a forEach loop, and for each object, the Map is updated to include the object in the corresponding array. The final result is a Map where keys are property values, and values are arrays of objects.
Finally, the Map is converted back to an object for easier use.

Example: In this, the Map data structure is used to create a mapping between categories and arrays of objects to group fruits based on the category.

// Array of objects

const array = [
    { id: 1, category: "A", value: "apple" },
    { id: 2, category: "B", value: "banana" },
    { id: 3, category: "A", value: "avocado" },
];

// Newly create map datastructure

const groupedObjects = new Map();

array.forEach((obj) => {
    const category = obj.category;
    groupedObjects.set(
        category,
        (groupedObjects.get(category) || []).concat(obj)
    );
});


console.log(Object.fromEntries(groupedObjects));

{
  A: [
    { id: 1, category: 'A', value: 'apple' },
    { id: 3, category: 'A', value: 'avocado' }
  ],
  B: [ { id: 2, category: 'B', value: 'banana' } ]
}

Using Lodash _.groupBy

The Lodash library offers a convenient and efficient way to group an array of objects based on a specified property using the _.groupBy method. This method takes the array and a function that returns the key to group by, creating an object where the keys are the group names and the values are arrays of objects belonging to those groups.

Example: In this example, the Lodash _.groupBy method is used to group fruits based on the category.

const _ = require('lodash');

// Array of objects
const array = [
    { id: 1, category: "A", value: "apple" },
    { id: 2, category: "B", value: "banana" },
    { id: 3, category: "A", value: "avocado" },
];

// Using Lodash _.groupBy
const groupedObjects = _.groupBy(array, 'category');

console.log(groupedObjects);

Output:

{
  A: [
    { id: 1, category: 'A', value: 'apple' },
    { id: 3, category: 'A', value: 'avocado' }
  ],
  B: [ { id: 2, category: 'B', value: 'banana' } ]
}

Using Array.prototype.sort with a Custom Grouping Function

This method involves first sorting the array by the specified property and then iterating through the sorted array to group the objects into a new object.

Example: To demonstrate grouping fruits based on the category using sort and a custom grouping function.

// Array of objects
const array = [
    { id: 1, category: "A", value: "Nikunj" },
    { id: 2, category: "B", value: "Yash" },
    { id: 3, category: "A", value: "Dhruv" },
    { id: 4, category: "B", value: "Arati" },
];

// Custom function to group by a specified property
function groupBy(array, property) {
    // Sort the array by the specified property
    array.sort((a, b) => (a[property] > b[property] ? 1 : -1));

    // Initialize the result object and current group
    const result = {};
    let currentGroup = [];
    let currentValue = array[0][property];

    // Iterate through the sorted array to group objects
    array.forEach((item) => {
        if (item[property] !== currentValue) {
            result[currentValue] = currentGroup;
            currentGroup = [];
            currentValue = item[property];
        }
        currentGroup.push(item);
    });

    // Add the last group to the result
    result[currentValue] = currentGroup;

    return result;
}

// Using the custom grouping function
const groupedObjects = groupBy(array, 'category');

console.log(groupedObjects);

{
  A: [
    { id: 3, category: 'A', value: 'Dhruv' },
    { id: 1, category: 'A', value: 'Nikunj' }
  ],
  B: [
    { id: 4, category: 'B', value: 'Arati' },
    { id: 2, category: 'B', value: 'Yash'...