Create nested array of objects from array of objects Javascript

Question

I have the following array of objects. How can I reshape the data to get the Expected Output?

let performanceReview = [ 
{ "name": "Sean", "Manager": "Joe", "Performance": 5}, 
{ "name": "John", "Manager": "Joe", "Performance": 9}, 
{ "name": "Paul", "Manager": "Joe", "Performance": 0}, 
{ "name": "Derek", "Manager": "Greg", "Performance": 10}, 
{ "name": "Lisa", "Manager": "Greg", "Performance": 10}, 
{ "name": "Julia", "Manager": "Donna", "Performance": 7}];

Expected Output

var Series = [ 
{Manager: "Joe", data: [["Sean", 5], ["John", 9], ["Paul", 0]]}, 
{Manager: "Greg", data: [["Derek", 10],["Lisa", 10]]}, 
{Manager: "Donna", data: [["Julia", 7]]}];

Could someone also please help walk me through their problem solving approach.

Answer 1

This solution breaks the task into two steps . (The code could be shorter, but this may be a bit easier to understand than trying to squeeze all the logic into a one-liner.)

1. Using Array.prototype.reduce , we can make an object where each property has:

• a manager's name as a key and
• the two-dimensional array of minions-with-ratings as the value

2. Then, using the for...in syntax, we can convert each property to an independent object and push it to the output array.

See the in-code comments for clarifications.

 // Main const originalArray = getOriginalArray(), obj = groupByManager(originalArray), output = formatFinalArray(obj); console.log(output); // We make an object because, unlike Arrays, they use named properties function groupByManager(input){ const obj = input.reduce( // 1st argument to `reduce` is a 'reducer' function (taking two args) // that will be applied to each item of the array (grouped, item) => { // 1st arg to reducer func is the accumulated value, returned after each loop // 2nd arg to reducer func is the item of the array for the current loop // If there's no prop named for this manager, makes one w/ empty array as value grouped[item.Manager] = grouped[item.Manager] || []; // Makes a two-item array of name and performance and pushes it to prop array grouped[item.Manager].push([item.name, item.Performance]); // The accumulated object has been updated, is ready to be used in next loop return grouped; }, // 2nd arg to `reduce` (an empty obj) to be used as `grouped` during first loop {} ); return obj; } // We'll pass the object into this function to get our desired format function formatFinalArray(obj){ const output = []; for(let key in obj){ output.push({ Manager: key, data: obj[key] }); } return output; } // Just provides our original array function getOriginalArray(){ return [ { "name": "Sean", "Manager": "Joe", "Performance": 5 }, { "name": "John", "Manager": "Joe", "Performance": 9 }, { "name": "Paul", "Manager": "Joe", "Performance": 0 }, { "name": "Derek", "Manager": "Greg", "Performance": 10 }, { "name": "Lisa", "Manager": "Greg", "Performance": 10 }, { "name": "Julia", "Manager": "Donna", "Performance": 7 } ]; }