How to group contents in an array of dictionary?

Question

I know this could have been solved easily from backend but was curious to know if there is any efficient way to solve this issue from front end using js.

I have an array

[
 {  
    id: 11
    ruleDesc: "rule 1 "
 },
{  
    id: 15
    ruleDesc: "rule 2 "
 },
{  
    id: 12
    ruleDesc: "rule 3 "
 },
{  
    id: 11
    ruleDesc: "rule 4 "
 },
{  
    id: 11
    ruleDesc: "rule 5 "
 },

]

What I'm expecting is

[
  {  
        id: 11
        ruleDesc: "rule 1 "
        ruleDesc: "rule 4 "
        ruleDesc: "rule 5 "
     },
{  
        id: 12
        ruleDesc: "rule 3 "
     },
{  
        id: 15
        ruleDesc: "rule 2 "
     },
]

In you expected output the first object contain duplicate keys. The last one will overwrite all. — Maheer Ali, May 28 '19 at 14:29
Object keys are unique but your expected structure has the same key multiple times. — trixn, May 28 '19 at 14:29
objects cannot have repeated properties, if you want to has multiple `ruleDesc` within a single object you need to use an array — Hunter McMillen, May 28 '19 at 14:29
Possible duplicate of [Most efficient method to groupby on a array of objects](https://stackoverflow.com/questions/14446511/most-efficient-method-to-groupby-on-a-array-of-objects) — Gregor Menih, May 28 '19 at 14:30

score 1 · Answer 1 · answered May 28 '19 at 14:32

You need to create an array of ruleDesc for same group. Because an object can't have same keys.

You can use reduce() to get an object and then use Object.values to get an array.

const arr = [ { id: 11, ruleDesc: "rule 1 " }, { id: 15, ruleDesc: "rule 2 " }, { id: 12, ruleDesc: "rule 3 " }, { id: 11, ruleDesc: "rule 4 " }, { id: 11, ruleDesc: "rule 5 " } ]

const res = arr.reduce((ac,{id,ruleDesc}) => {
  ac[id] = ac[id] || {id,ruleDesc:[]}
  ac[id].ruleDesc.push(ruleDesc);
  return ac;
},{})
console.log(Object.values(res))

score 1 · Answer 2 · answered May 28 '19 at 15:44

This is similar to the answer from Masheer Ali, but I think the reduction is a little nicer:

const transform = arr => Object .values (arr .reduce ((a, {id, ruleDesc}) => 
  ({...a, [id]: {id, ruleDesc: [...( (a [id] || {}) .ruleDesc || [] ), ruleDesc]}}),
  {}
))

const rules = [{id: 11, ruleDesc: "rule 1 "}, {id: 15, ruleDesc: "rule 2 "}, {id: 12, ruleDesc: "rule 3 "}, {id: 11, ruleDesc: "rule 4 "}, {id: 11, ruleDesc: "rule 5 "}]

console .log (
  transform (rules)
)

One advantage is that if you have additional properties you want to merge, it's only a minor tweak:

const transform = arr => Object .values (arr .reduce ((a, {id, ruleDesc, ...rest}) => 
  ({...a, [id]: {...(a[id] || {}), id,  ruleDesc: [...((a[id] || {}).ruleDesc || []) , ruleDesc], ...rest}}),
  {}
))

How to group contents in an array of dictionary?

2 Answers2