Group array of objects by common keys, merging nested property into array

Question

Suppose I have this array:

[
    {"type": "A",   "status": "CREATED",        "name": "Jack"}, 
    {"type": "A",   "status": "CREATED",        "name": "John"}, 
    {"type": "A",   "status": "UPDATED",        "name": "Alex"}, 
    {"type": "B",   "status": "UPDATED",        "name": "Jane"}
]

and I want to have a new array grouped by "type" and "status" and have the names in a list. This is the desired output:

[
    {"type": "A",   "status": "CREATED",        "name-list": ["Jack", "John"]}, 
    {"type": "A",   "status": "UPDATED",        "name-list": ["Alex"]}, 
    {"type": "B",   "status": "UPDATED",        "name-list": ["Jane"]}
]

as you can see the first object of the array contains 2 names because belong to the same "type" and "status". (name-list is just an example, could also remain name, the important thing is that it should be an array of strings/objects)

I have to represent these data in an html page and so needs to be able to cycle them via JavaScript.

If performance is something that matters for your app, you may check out [the benchmark](https://jsbench.me/htkcxke91n/1) — Yevhen Horbunkov, Jul 22 '20 at 16:13

Yevhen Horbunkov · Accepted Answer · 2020-07-22T16:48:21.380

3

You may traverse your source array with Array.prototype.reduce() building up the Map, having type and status combined as a key and respective object, with merged name as a value. Then extract Map.prototype.values() from that Map:

const src = [{"type":"A","status":"CREATED","name":"Jack"},{"type":"A","status":"CREATED","name":"John"},{"type":"A","status":"UPDATED","name":"Alex"},{"type":"B","status":"UPDATED","name":"Jane"}],

     result = [...src
        .reduce((r, o) => {
          const key = o.type+'\ud8ff'+o.status,
                match = r.get(key)
          match ? match.name.push(o.name) : r.set(key, {...o, name: [o.name]})
          return r
        }, new Map())
        .values()
      ]
      
console.log(result)

.as-console-wrapper{min-height:100%;}

edited Jul 22 '20 at 16:48

answered Jul 22 '20 at 15:31

Yevhen Horbunkov

14,965
3
20
42

Tha's pretty cool, how about if I have an additional integer parameter in each object, that I want to sum when grouping the names? – andQlimax Jul 22 '20 at 16:33
1

@andQlimax : that would be something, as simple as [that](https://codepen.io/ygorbunkov/pen/QWyYrvx?editors=0012) – Yevhen Horbunkov Jul 22 '20 at 16:48

score 2 · Answer 2 · answered Jul 22 '20 at 15:31

2

I would try with .reduce() and .find():

const data = [
    {"type": "A",   "status": "CREATED",        "name": "Jack"}, 
    {"type": "A",   "status": "CREATED",        "name": "John"}, 
    {"type": "A",   "status": "UPDATED",        "name": "Alex"}, 
    {"type": "B",   "status": "UPDATED",        "name": "Jane"}
];

const result = data.reduce((a, { type, status, name}) => {
  const found = a.find(e => e.type === type && e.status === status);
  
  if (found) {
    found['name-list'].push(name);
  } else {
    a.push({
      type,
      status,
      ['name-list']: [name]
    });
  }
  
  return a;
}, []);

console.log(result);

answered Jul 22 '20 at 15:31

norbitrial

14,716
7
32
59

1

Doing nested lookups (`.find()`'s inside `.reduce()` may slow down the performance should source array get large enough. – Yevhen Horbunkov Jul 22 '20 at 16:00
@YevgenGorbunkov Agree, checked your answer, that's pretty smart, also upvoted that. – norbitrial Jul 23 '20 at 07:21

score 1 · Answer 3 · answered Jul 22 '20 at 15:34

const arr = [
    {"type": "A",   "status": "CREATED",        "name": "Jack"}, 
    {"type": "A",   "status": "CREATED",        "name": "John"}, 
    {"type": "A",   "status": "UPDATED",        "name": "Alex"}, 
    {"type": "B",   "status": "UPDATED",        "name": "Jane"}
]

const res = arr.reduce((acc, cur) => {
  
  acc.forEach((obj, idx) => {
      if(obj.type == cur.type && obj.status == cur.status){
          acc[idx]["name-list"].push(cur.name)
      }
  })
  
  if(!acc.some(obj => obj["name-list"].includes(cur.name))){
      acc.push({type: cur.type, status: cur.status, "name-list": [cur.name]})
  }
  
  return acc
},[])

console.log(res)

Ravi Kukreja · Answer 4 · 2020-07-22T15:41:30.177

0

Using reduce and Object.values

let arr = [
    {"type": "A",   "status": "CREATED",        "name": "Jack"}, 
    {"type": "A",   "status": "CREATED",        "name": "John"}, 
    {"type": "A",   "status": "UPDATED",        "name": "Alex"}, 
    {"type": "B",   "status": "UPDATED",        "name": "Jane"}
];

arr = Object.values(
    arr.reduce((acc, cur) => {
        if(acc[`${cur.type}-${cur.status}`]) acc[`${cur.type}-${cur.status}`]["name-list"].push(cur.name)

        else {
            acc[`${cur.type}-${cur.status}`] = {type:cur.type, status:cur.status, "name-list":[cur.name]}
        }    
        return acc;
    }, {})
);

console.log(arr)

edited Jul 22 '20 at 15:41

answered Jul 22 '20 at 15:32

Ravi Kukreja

627
1
8
17

Using hyphen as delimiter is sort of risky as you, would get merged unexpectedly objects with `{type: 'a-b', status:'c..}` and `{type: 'a', status: 'b-c'..}. You should use something more safe as delimiter, you may refer to [my answer](https://stackoverflow.com/a/63037887/11299053) for example. – Yevhen Horbunkov Jul 22 '20 at 15:59

score 0 · Answer 5 · answered Jul 22 '20 at 15:36

Here is what you want:

const ar = [
    { "type": "A", "status": "CREATED", "name": "Jack" },
    { "type": "A", "status": "CREATED", "name": "John" },
    { "type": "A", "status": "UPDATED", "name": "Alex" },
    { "type": "B", "status": "UPDATED", "name": "Jane" }
];
const res = Array.from(ar.reduce((a, c) => {
    if (a.has(c.type + c.status)) {
        a.get(c.type + c.status)['name-list'].push(c.name);
    } else {
        c['name-list'] = [c.name];
        delete c.name;
        a.set(c.type + c.status, c)
    }
    return a;
}, new Map()).values());

console.log(res);

Using `type` and `status` concatenated as a Map key is somewhat dangerous, as you may get merged unexpectedly objects with `{type: 'a', status: 'bc'..}` and `{type: 'ab', status: 'c'..}`. You'd be much better off using some *safe* character as delimiter. You may refer [my ansewr](https://stackoverflow.com/a/63037887/11299053) for example. — Yevhen Horbunkov, Jul 22 '20 at 16:03

Group array of objects by common keys, merging nested property into array

5 Answers5