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.

what effort have you made to solving the problem?

Daniel A. White
– Daniel A. White

2020-08-09 02:33:06 +00:00
Commented Aug 9, 2020 at 2:33 — Daniel A. White
– Daniel A. White, Commented Aug 9, 2020 at 2:33

Cat · Accepted Answer · 2020-08-09 03:14:37Z

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

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

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  }
  ];
}

Collectives™ on Stack Overflow

Create nested array of objects from array of objects Javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related