Using JavaScript to group an array of objects by a specific key

Question

Using JavaScript to group an array of objects by a specific key

I'm struggling to group my array of objects into another desired array based on a specific property. Despite checking out various tutorials, I couldn't achieve the expected output.

What I aim for is to group all elements according to their designated properties.

Below 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',
    },
  ];

Desired 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',
        },
      ],
    },
  ];

javascript

Answer 1

Answer №1

[curItem.groupBy]To improve your code, consider utilizing the reduce method. Visit this link for more information: 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;
}, {}));

Answer 2

[curItem.groupBy]To improve your code, consider utilizing the reduce method. Visit this link for more information: 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;
}, {}));

Answer 3

Answer №2

Here's a suggested way to approach it:

const result = []

data.forEach(item => {
  const target = result.find(elem => elem.category === item.groupBy);

  if (!target) {
    result.push({ category: item.groupBy, symbol: item.icon, items: [ { name: item.permission_name } ] })
  } else {
    target.items.push({ name: item.permission_name })
  }
})

This method involves creating a fresh array by filtering the original one according to your specifications.

Answer 4

Here's a suggested way to approach it:

const result = []

data.forEach(item => {
  const target = result.find(elem => elem.category === item.groupBy);

  if (!target) {
    result.push({ category: item.groupBy, symbol: item.icon, items: [ { name: item.permission_name } ] })
  } else {
    target.items.push({ name: item.permission_name })
  }
})

This method involves creating a fresh array by filtering the original one according to your specifications.

Answer 5

Answer №3

If you're looking to streamline your code, one approach could be to create a function that transforms an array into an object:

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

A more concise version of the function would look like this:

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

You can then use this function to group your data by a specific property:

const groupedData = groupBy('customProperty', dataArray);
// { CategoryA: [...], CategoryB: [...] }

From there, you have the option to work directly with the grouped object or further manipulate it with another utility function:

const convertToArray = (nameProperty, groupedData) => Object.entries(groupedData).map((group) => ({ [nameProperty]: group[0], items: group[1] }))

Applying this function would transform your grouped data into an array format for easier handling:

const formattedData = convertToArray('category', groupedData);

This structured approach allows you to easily filter, map, or perform other operations on the data as needed.

Answer 6

If you're looking to streamline your code, one approach could be to create a function that transforms an array into an object:

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

A more concise version of the function would look like this:

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

You can then use this function to group your data by a specific property:

const groupedData = groupBy('customProperty', dataArray);
// { CategoryA: [...], CategoryB: [...] }

From there, you have the option to work directly with the grouped object or further manipulate it with another utility function:

const convertToArray = (nameProperty, groupedData) => Object.entries(groupedData).map((group) => ({ [nameProperty]: group[0], items: group[1] }))

Applying this function would transform your grouped data into an array format for easier handling:

const formattedData = convertToArray('category', groupedData);

This structured approach allows you to easily filter, map, or perform other operations on the data as needed.

Answer 7

Answer №4

One way to accomplish this task is by extracting unique groupBy values and then looping through them to populate a new array as shown below:

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);

Answer 8

One way to accomplish this task is by extracting unique groupBy values and then looping through them to populate a new array as shown below:

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);

Answer 9

Answer №5

Step one - acquire the filtered essential groupBy values.

Secondly - iterate through the filtered groupBy values and generate a fresh array of objects based on your specifications.

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)); // To eliminate undefined keys.

console.log(output);

Answer 10

Step one - acquire the filtered essential groupBy values.

Secondly - iterate through the filtered groupBy values and generate a fresh array of objects based on your specifications.

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)); // To eliminate undefined keys.

console.log(output);

Answer 11

Answer №6

If you want to customize the permissions Array, you can utilize Array.prototype.reduce.

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);

Answer 12

If you want to customize the permissions Array, you can utilize Array.prototype.reduce.

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);

Using JavaScript to group an array of objects by a specific key

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

What is the best way to switch between light and dark themes with the ability to locally store the current theme?

Unable to Get Basic jQuery .load Example to Function

There appears to be an issue with the compilation of the TypeScript "import { myVar }" syntax in a Node/CommonJS/ES5 application

Assign a value to an Html.HiddenField without tying it to the model upon form submission

Guide on finding the index of the clicked element based on its class

Using Node.js (Express) to import a JSON file from a URL

Why does refreshing a page in AngularJS cause $rootScope values to disappear?

Detecting when the Ctrl key is pressed while the mouse is hovering over an element in React

Refreshing a portion of the view following the submission of a post with jQuery AJAX in ASP.NET MVC

"Implementing classes with AngularJS: A Step-by-Step Guide

Having difficulty in setting items to a relative position in order to align them properly

Show the user a number rounded to two decimal places in JavaScript without altering its original precise value

The next.js code is functioning properly when run in development mode, but encounters issues when attempting

Is it recommended to create model classes in React components?

The function .change in jQuery does not function properly when attempting to fill in two select elements

Can you explain the concept of a "subpath pattern" in NodeJS?

Ways to dynamically combine a group of objects

What is the best way to activate a JQ function with my submit button?

Utilizing PHP to create an interactive website

Unexpected issue with controller functionality following modification to URL