How do I group an array of objects into an array of ARRAYS by a property?

Question

I have an array of objects with common properties. For example

[{color:"red",name:"basher"},
 {color:"blue", name:"tony"},
 {color:"red",name:"bobo"},
 {color:"blue",name:"pina"}
]

The desired output is an array of arrays like the following -

[
    [{color:"red",name:"basher"},{color:"red",name:"bobo"}],
    [{color:"blue",name:"tony"},{color:"blue",name:"pina"}]
]

I've found this question slightly similar question but it splits the array into objects with keys. I dont want the keys. I simply want to split the array of objects into an array of arrays each containing the objects with similar properties.

After you split into an object with keys, you can use `Object.values()` to get an array of the values without the keys. — Barmar, Apr 23 '21 at 16:14

score 1 · Answer 1 · answered Aug 27 '20 at 23:13

1

After grouping, you just have to grab the values

const array = [
  { color: "red", name: "basher" },
  { color: "blue", name: "tony" },
  { color: "red", name: "bobo" },
  { color: "blue", name: "pina" },
]

const res = Object.values(
  array.reduce((acc, el) => {
    if (acc[el.color] !== undefined) {
      acc[el.color].push(el)
    } else {
      acc[el.color] = [el]
    }
    return acc
  }, {})
)

console.log(res)

Object.values()

answered Aug 27 '20 at 23:13

hgb123

13,869
3
20
38

why not just acc[el.color] instead of the undefined check? – EugenSunic Aug 27 '20 at 23:14
1

@EugenSunic just for readability, the OP could exclude it later himself – hgb123 Aug 27 '20 at 23:16

charlietfl · Accepted Answer · 2020-08-27T23:25:59.317

The principles of groupBy are basically the same ....you need an object or Map that uses the common values as keys, then group/process the values for that key. Then get all the Map or Object values as result

Example using Map

const data = [{color:"red",name:"basher"},{color:"blue", name:"tony"},{color:"red",name:"bobo"},{color:"blue",name:"pina"}],

group = data.reduce((a,c) => a.set( c.color, [...(a.get(c.color) || []) ,c]) ,new Map),

res = [...group.values()]
console.log(res)

score 0 · Answer 3 · answered Aug 27 '20 at 23:23

const arr = [{
  color: "red",
  name: "basher"
}, {
  color: "blue",
  name: "tony"
}, {
  color: "red",
  name: "bobo"
}, {
  color: "blue",
  name: "pina"
}];

const groupObjects = (arr, prop) => {
  const result = [];
  const values = [...new Set(arr.map(obj => obj[prop]))];
  values.forEach(value => result.push(arr.filter(obj => obj[prop] === value)));
  return result;
};

console.log(groupObjects(arr, 'color'));

How do I group an array of objects into an array of ARRAYS by a property?

3 Answers3