Group objects in an array by using key and form new array object

Question

Below is my array object

[{ role : 'Role 1', name: 'A', slid: 'a'}, {role : 'Role 1', name: 'B',slid: 'b'}, {role : 'Role 2', name: 'X', slid: 'x'}, {role : 'Role 2',name: 'Y', slid: 'y'},{role : 'Role 3',name: 'Z',slid: 'z'}]

How to combine the objects in the array by using role and form new array objects in the below format.

[{role : 'Role 1', list: [{name: 'A', slid: 'a'}, {name: 'B', slid: 'b'}]},
 {role : 'Role 2', list: [{name: 'X, slid: 'x'}, {name: 'Y', slid: 'y'}]},
 {role : 'Role 3', list: [{name: 'Z', slid: 'z'}]}]

I have looked into many examples, but could not find a solution.

Eddie · Accepted Answer · 2018-11-24 14:16:50Z

3

You can use reduce to group the array into an object. Use Object.values to convert the object into an array.

var arr = [{"role":"Role 1","name":"A","slid":"a"},{"role":"Role 1","name":"B","slid":"b"},{"role":"Role 2","name":"X","slid":"x"},{"role":"Role 2","name":"Y","slid":"y"},{"role":"Role 3","name":"Z","slid":"z"}];

var result = Object.values(arr.reduce((c, {role,...r}) => {
  c[role] = c[role] || {role,list: []};
  c[role].list.push(r);
  return c;
}, {}));

console.log( result );

answered Nov 24, 2018 at 14:16

Eddie

26.8k6 gold badges39 silver badges59 bronze badges

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

Comments

Orelsanpls · Accepted Answer · 2018-11-24 14:14:33Z

0

const arr = [{
  role: 'Role 1',
  name: 'A',
  slid: 'a',
}, {
  role: 'Role 1',
  name: 'B',
  slid: 'b',
}, {
  role: 'Role 2',
  name: 'X',
  slid: 'x',
}, {
  role: 'Role 2',
  name: 'Y',
  slid: 'y',
}, {
  role: 'Role 3',
  name: 'Z',
  slid: 'z',
}];

// We go through every array element
const ret = arr.reduce((tmp, x) => {
  // Does we have already the x.role stored in our final array ?
  const elem = tmp.find(y => y.role === x.role);

  // Yes, so we push a new value inside of it
  if (elem) {
    elem.list.push({
      name: x.name,
      slid: x.slid
    });

    return tmp;
  }

  // No, so we create a new array element
  tmp.push({
    role: x.role,
    
    list: [{
      name: x.name,
      slid: x.slid
    }],
  });
  
  return tmp;
}, []);

console.log(ret);

answered Nov 24, 2018 at 14:14

Orelsanpls

23.7k7 gold badges46 silver badges74 bronze badges

1 Comment

user3125637 Over a year ago

Thanks for a quick response.

Nitish Narang · Accepted Answer · 2018-11-24 14:49:28Z

0

Just a different approach with Array.map

let input = [{ role : 'Role 1', name: 'A', slid: 'a'}, {role : 'Role 1', name: 'B',slid: 'b'}, {role : 'Role 2', name: 'X', slid: 'x'}, {role : 'Role 2',name: 'Y', slid: 'y'},{role : 'Role 3',name: 'Z',slid: 'z'}]


let res = input.sort((a,b) => a.role.localeCompare(b.role))
               .map(({ role, ...rest }) => ({ role, list: [rest] }))
               .flatMap(({ role, list }, i, t) => 
                     role == (t[i+1] && t[i+1].role)
                       ? (t[i+1].list.unshift(list[0]), [])
                       : { role, list })

console.log(res)

answered Nov 24, 2018 at 14:49

Nitish Narang

4,2042 gold badges17 silver badges22 bronze badges

Comments

Jayampathy Wijesena · Accepted Answer · 2018-11-27 11:12:49Z

0

You could use reduce function to solve the issue

const arr = [{ role : 'Role 1', name: 'A', slid: 'a'}, {role : 'Role 1', name: 'B',slid: 'b'}, {role : 'Role 2', name: 'X', slid: 'x'}, {role : 'Role 2',name: 'Y', slid: 'y'},{role : 'Role 3',name: 'Z',slid: 'z'}]

var groupBy = function(array, key) {
  return array.reduce(function(reduceVal, obj) {
    (reduceVal[obj[key]] = reduceVal[obj[key]] || []).push(obj);
    return reduceVal;
  }, {});
};

console.log(groupBy(arr, 'role'));

//{Role 1: Array(2), Role 2: Array(2), Role 3: Array(1)}

answered Nov 27, 2018 at 11:12

Jayampathy Wijesena

1,7601 gold badge19 silver badges27 bronze badges

Collectives™ on Stack Overflow

Group objects in an array by using key and form new array object

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related