How to groupBy array of object in JavaScript

Question

I want to groupBy my array of an object into some another desired array of objects. I go through several tutorials but didn't get the appropriate output.

What I want is based on their groupBy properties I want to group all the elements

Here is my input

permissions= [
    {
      code: 'U00',
      permission_name: 'Read User',
      groupBy: 'User',
      icon: 'user',
    },
    {
      code: 'U01',
      permission_name: 'Create User',
      groupBy: 'User',
      icon: 'user',
    },
  
    {
      code: 'B00',
      permission_name: 'Read Batch',
      groupBy: 'Batch',
      icon: 'user',
    },
    {
      code: 'B01',
      permission_name: 'Create Batch',
      groupBy: 'Batch',
      icon: 'user',
    },
    {
      code: 'B10',
      permission_name: 'Update Batch',
      groupBy: 'Batch',
      icon: 'user',
    },
  ];

Required output

 Output = [
    {
      label: 'User',
      icon: 'user',
      children: [
        {
          label: 'Create Users',
        },
        {
          label: 'Read All Users',
        },
      
      ],
    },
    {
      label: 'Batch',
      children: [
        {
          label: 'Create Batchs',
        },
        {
          label: 'Read All Batch',
        },
        {
          label: 'Update Batch',
        },
        {
          label: 'Disabled Batch',
        },
      ],
    },
  ];

Group by is a logical equivalent of reduce, so you need a reducer function suiting your needs. — user1514042
– user1514042, Commented Apr 29, 2021 at 12:16

Spencer Bard · Accepted Answer · 2021-04-29 13:59:30Z

2

[curItem.groupBy]You should try using reduce: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce

return Object.values(permissions.reduce((curObj, curItem) => { 
  if(!curObj.hasOwnProperty(curItem.groupBy)){
    curObj[curItem.groupBy] = { 
      label: curItem.label, 
      icon: curItem.icon, 
      children: [] 
    };
  }
  curObj[curItem.groupBy].children.push({ label: curItem.label });
  return curObj;
}, {}));

edited Apr 29, 2021 at 13:59

answered Apr 29, 2021 at 12:16

Spencer Bard

1,0356 silver badges10 bronze badges

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

1 Comment

Pavlo Hryza Over a year ago

If I understand it correctly then pushing should be specified with a curItem.groupBy key: curObj[curItem.groupBy].children.push({ label: curItem.permission_name });

Kira · Accepted Answer · 2021-04-29 12:17:45Z

1

You can write something like:

const output = []

permissions.forEach(obj => {
  const dest = output.find(target => target.label === obj.groupBy);

  if (!dest) {
    output.push({ label: obj.groupBy, icon: obj.icon, children: [ { label: obj.permission_name } ] })
  } else {
    dest.children.push({ label: obj.permission_name })
  }
})

You are basically creating a new array, mapping the original based on your requires.

answered Apr 29, 2021 at 12:17

Kira

1023 bronze badges

Comments

KobraKalle · Accepted Answer · 2021-04-29 12:49:45Z

You could first create a function to reduce the array into an object, like so:

const groupBy = (prop, list) => {
    return list.reduce((groups, item) => {
        const propVal = item[prop];
        const target = groups[propVal] ?? [];
        
        return { ...groups, [propVal]: [...target, item] };
    }, {});
};

Or shorter:

const groupBy = (prop, list) => list.reduce((groups, item) => ({ ...groups, [item[prop]]: [...groups[item[prop]] ?? [], item] }), {});

And then:

const permObj = groupBy('groiupBy', permissions);
// { User: [...], Batch: [...] }

Now you could just work with that object or continue by writing a second function:

const groupsToArray = (nameProp, groups) => Object.entries(groups).map((g) => ({ [nameProp]: g[0], data: g[1] }))

And use it:

const newPermList = groupsToArray('label', permObj);

which would leave you with an array of objects with the according labels and the children in the 'data' prop of each object.

Of course then you could still filter out or map to get rid of duplicate data that you dont need. But you get the idea.

Giovanni Esposito · Accepted Answer · 2021-04-29 12:23:25Z

You colud find distinct groupBy values and then iterate on this array to fill result array like:

let permissions= [
    {
      code: 'U00',
      permission_name: 'Read User',
      groupBy: 'User',
      icon: 'user',
    },
    {
      code: 'U01',
      permission_name: 'Create User',
      groupBy: 'User',
      icon: 'user',
    },
  
    {
      code: 'B00',
      permission_name: 'Read Batch',
      groupBy: 'Batch',
      icon: 'user',
    },
    {
      code: 'B01',
      permission_name: 'Create Batch',
      groupBy: 'Batch',
      icon: 'user',
    },
    {
      code: 'B10',
      permission_name: 'Update Batch',
      groupBy: 'Batch',
      icon: 'user',
    },
  ];
  
  let groups = [...new Set(permissions.map(({groupBy})=>groupBy))];
  let result = [];
  for (let i = 0; i < groups.length; i++){
     let res = {};
     res.label = groups[i];
     res.icon = permissions.filter(x => x.groupBy === groups[i])[0].icon;
     res.children = [];
     let arrayOfGroup = permissions.filter(x => x.groupBy === groups[i]);
     for (let j = 0; j < arrayOfGroup.length; j ++){
        let child = {};
        child.label = arrayOfGroup[j].permission_name;
        res.children.push(child);
     }
     result.push(res);
  }
  console.log(result);

Tigran Abrahamyan · Accepted Answer · 2021-04-29 12:41:54Z

First step - get filtered necessary groupBy values.

Second step - mapping through filtered groupBy values and create a new array of objects based on your requirements.

const permissions = [
  {
    code: 'U00',
    permission_name: 'Read User',
    groupBy: 'User',
    icon: 'user',
  },
  {
    code: 'U01',
    permission_name: 'Create User',
    groupBy: 'User',
    icon: 'user',
  },

  {
    code: 'B00',
    permission_name: 'Read Batch',
    groupBy: 'Batch',
    icon: 'user',
  },
  {
    code: 'B01',
    permission_name: 'Create Batch',
    groupBy: 'Batch',
    icon: 'user',
  },
  {
    code: 'B10',
    permission_name: 'Update Batch',
    groupBy: 'Batch',
    icon: 'user',
  },
];

const groups = [ ...new Set(permissions.map(({ groupBy }) => groupBy)) ];

const result = groups.map(groupName => ({
  value: permissions.find(permission => permission.groupBy === groupName).groupBy,
  icon: permissions.find(permission => permission.icon === groupName.toLowerCase())?.icon,
  children: permissions
    .filter(permission => permission.groupBy === groupName)
    .map(n => ({ value: n.permission_name })),
}));

const output = JSON.parse(JSON.stringify(result)); // For removing undefined keys.

console.log(output);

Yves Kipondo · Accepted Answer · 2021-04-29 12:58:04Z

You can use Array.prototype.reduce to alter the permissions Array the way you'll like.

let permissions = [{
      code: 'U00',
      permission_name: 'Read User',
      groupBy: 'User',
      icon: 'user',
    },
    {
      code: 'U01',
      permission_name: 'Create User',
      groupBy: 'User',
      icon: 'user',
    },
  
    {
      code: 'B00',
      permission_name: 'Read Batch',
      groupBy: 'Batch',
      icon: 'user',
    },
    {
      code: 'B01',
      permission_name: 'Create Batch',
      groupBy: 'Batch',
      icon: 'user',
    },
    {
      code: 'B10',
      permission_name: 'Update Batch',
      groupBy: 'Batch',
      icon: 'user',
    }
];
    
let results = permissions.reduce(function(accumulator, current) {
    let previousPermission = accumulator.find(function(el){
        return el.label === current.groupBy
    });
    
    if(!previousPermission){
        return accumulator.concat({
            label: current.groupBy, 
            icon: current.icon,
            children: [{
              label: current.permission_name  
            }]
        });
    } else {

        let permissionIndex = accumulator.findIndex(item => {
          return item.label === previousPermission.label;     
        });

        previousPermission = {
            ...previousPermission,
            children: [
              ...previousPermission.children,
              { label: current.permission_name }
            ]
        }
        accumulator[permissionIndex] = previousPermission;
        return accumulator;
    }
  
}, []);

console.log(results);

Collectives™ on Stack Overflow

How to groupBy array of object in JavaScript

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related