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.

Javascript

// 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);

Output

{
  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.

Javascript

// 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);
});

// Output
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 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.

Javascript

// 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)
  );
});

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

Output

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