Converting array of javascript objects to key-value pairs of arrays based on property using ES6

Question

Lets say I have the following array of objects:

myArray = [
  {name: 'First', parent: 1, delta: 2},
  {name: 'Second', parent: 1, delta: 1},
  {name: 'Third', parent: 2, delta: 1}
];

I would like to convert this array to an object, with keys for the parent, and values of the objects. e.g.:

result = {
  1: [
       {name: 'First', parent: 1, delta: 2},
       {name: 'Second', parent: 1, delta: 1}
     ],
  2: [
       {name: 'Third', parent: 2, delta: 1}
     ]
}

I can do this using a forEach, or nested loops, but am wondering if there is a way using ES6 syntax to do this a bit more concise/inline, which would allow me to do things like sort on delta, etc.

When deciding which method to use, you might consider the performance of the different approaches and ponder that less code is rarely a good reason, of itself, to use a particular algorithm. The plain if..else method is nearly 10 times faster than the one using spread and concat, and twice as fast as the concat method. And you might also consider that if..else is also very much easier to read and maintain for inexperienced coders (who are most likely to do such tasks). — RobG
– RobG, Commented Oct 26, 2018 at 11:22

Ankit Agarwal · Accepted Answer · 2018-10-26 10:55:47Z

2

You can use Array.reduce() for that:

let myArray = [{
    name: 'First',
    parent: 1,
    delta: 2
  },
  {
    name: 'Second',
    parent: 1,
    delta: 1
  },
  {
    name: 'Third',
    parent: 2,
    delta: 1
  }
];
var res = myArray.reduce((acc, item) => {
  if (acc[item.parent]) {
    acc[item.parent].push(item);
  } else {
    acc[item.parent] = [item];
  }
  return acc;
}, {});
console.log(res);

answered Oct 26, 2018 at 10:55

Ankit Agarwal

30.8k5 gold badges41 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nitish Narang · Accepted Answer · 2018-10-26 11:00:14Z

1

You can use reduce to achieve this

var myArray = [
  {name: 'First', parent: 1, delta: 2},
  {name: 'Second', parent: 1, delta: 1},
  {name: 'Third', parent: 2, delta: 1}
];

var result = myArray.reduce((o,d) =>
             (
               o[d.parent] = (o[d.parent] || []).concat(d)
               , o
             )
             , {})
console.log(result)

edited Oct 26, 2018 at 11:00

answered Oct 26, 2018 at 10:53

Nitish Narang

4,2042 gold badges17 silver badges22 bronze badges

Comments

Anurag Awasthi · Accepted Answer · 2018-10-26 10:53:49Z

1

var myArray = [
  {name: 'First', parent: 1, delta: 2},
  {name: 'Second', parent: 1, delta: 1},
  {name: 'Third', parent: 2, delta: 1}
];

console.log(myArray.reduce((acc, val)=>({...acc, [val.parent]: (acc[val.parent] || []).concat(val)}), {}))

answered Oct 26, 2018 at 10:53

Anurag Awasthi

6,2532 gold badges21 silver badges34 bronze badges

Comments

Eugene Mihaylin · Accepted Answer · 2018-10-26 12:46:43Z

1

const result = myArray.reduce((result, el) => {
  if (result[el.parent]) result[el.parent].push(el);
  else result[el.parent] = [el];
  return result;
}, {});

edited Oct 26, 2018 at 12:46

answered Oct 26, 2018 at 10:54

Eugene Mihaylin

1,8743 gold badges21 silver badges33 bronze badges

1 Comment

RobG Over a year ago

Don't for get to return result, otherwise this will error after the first iteration (the callback passes undefined as the accumulator). ;-)

Collectives™ on Stack Overflow

Converting array of javascript objects to key-value pairs of arrays based on property using ES6

4 Answers 4

Comments

Comments

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Related