Convert Array of Objects into Object of Arrays in JavaScript

In this article, we will learn to convert an array of objects into an object of arrays in JavaScript. When working with JavaScript, it's common to handle arrays of objects representing structured data. A frequent challenge is grouping these objects based on a shared property and transforming the result into a new data structure.

Problem Statement

The goal is to convert an array of objects into an object of arrays where the keys represent a specific property (e.g., roles) and the values are arrays of corresponding data (e.g., player names).

Input

const team = [ { role: 'Batsman', player: 'V Kohli' }, { role: 'Wicket Keeper', player: 'KL Rahul' }, { role: 'Batsman', player: 'R Sharma' }, { role: 'Wicket Keeper', player: 'R Pant' }, { role: 'Bowler', player: 'B Kumar' }, { role: 'Bowler', player: 'M Shami' } ];

Output

{ Batsman: [ 'V Kohli', 'R Sharma' ], WicketKeeper: [ 'KL Rahul', 'R Pant' ], Bowler: [ 'B Kumar', 'M Shami' ] }

Different Approaches

Following are the two different approaches for converting an array of objects into an object of arrays in JavaScript ?

• Using forEach
• Using reduce

Using forEach

Let's define a function objectify() that takes in the array as an argument and returns the corresponding object. The forEach method iterates through each element of the array, allowing us to perform operations on each item.

team.forEach(member => { }

Following are the steps for converting an array of objects into an object of arrays using the forEach ?

• We create an empty object, teamObject.
  
• As we loop through the array, we check if the role (key) already exists in teamObject.
  
• If it exists, we append the player to the existing array.
  
• Otherwise, we create a new array with the current player.

Adding members using the push() method ?

teamObject[member.role].push(member.player);

Example

Below is an example of converting an array of objects into an object of arrays ?

const team = [ { role: 'Batsman', player: 'V Kohli' }, { role: 'Wicket Keeper', player: 'KL Rahul' }, { role: 'Batsman', player: 'R Sharma' }, { role: 'Wicket Keeper', player: 'R Pant' }, { role: 'Bowler', player: 'B Kumar' }, { role: 'Bowler', player: 'M Shami' } ]; const objectify = (team) => { const teamObject = {}; team.forEach(member => { if(teamObject[member.role]){ teamObject[member.role].push(member.player); }else{ teamObject[member.role] = [member.player]; } }); return teamObject; } console.log(objectify(team));

Output

{ Batsman: [ 'V Kohli', 'R Sharma' ], WicketKeeper: [ 'KL Rahul', 'R Pant' ], Bowler: [ 'B Kumar', 'M Shami' ] }

Time Complexity: O(n), where n is the number of elements in the array.
Space Complexity: O(k + m), where k is the number of unique roles and m is the total number of players.

Using reduce

The reduce method is a powerful tool in JavaScript that processes an array and combines its elements into a single value or data structure, such as an object or array.

return team.reduce((acc, member) => {}

Following are the steps for converting an array of objects into an object of arrays using the reduce() method ?

• We create an empty object, teamObject.
  
• As we loop through the array, we check if the role (key) already exists in teamObject.
  
• If it exists, we append the player to the existing array.
  
• Otherwise, we create a new array with the current player.

Example

Below is an example of converting an array of objects into an object of arrays ?

const team = [ { role: 'Batsman', player: 'V Kohli' }, { role: 'Wicket Keeper', player: 'KL Rahul' }, { role: 'Batsman', player: 'R Sharma' }, { role: 'Wicket Keeper', player: 'R Pant' }, { role: 'Bowler', player: 'B Kumar' }, { role: 'Bowler', player: 'M Shami' } ]; const objectifyWithReduce = (team) => { return team.reduce((acc, member) => { acc[member.role] = acc[member.role] || []; acc[member.role].push(member.player); return acc; }, {}); } console.log(objectifyWithReduce(team)); 

Output

{ Batsman: [ 'V Kohli', 'R Sharma' ], WicketKeeper: [ 'KL Rahul', 'R Pant' ], Bowler: [ 'B Kumar', 'M Shami' ] }

Time Complexity: O(n), where n is the number of elements in the array.
Space Complexity: O(k + m), where k is the number of unique roles and m is the total number of players.

Comparison Table