JSFiddle - React, Tailwind, and code Playground

by Eugen Sunic

JavaScript

var xobj = [{
    role: "Organize Admin",
    role_id: "id1",
    permission_name: "View All Users",
    active: "true"
  },
  {
    role: "Organize Admin",
    role_id: "id1",
    permission_name: "Create users",
    active: "true"
  },
  {
    role: "Organize Admin",
    role_id: "id1",
    permission_name: "Edit users",
    active: "true"
  },
  {
    role: "System Admin",
    role_id: "id2",
    permission_name: "Edit users",
    active: "true"
  },
  {
    role: "System Admin",
    role_id: "id2",
    permission_name: "Edit users",
    active: "true"
  },
];




const groupedData = xobj.reduce((acc, x) => {
  const index = acc.findIndex(y => Object.keys(y)[0] === x.role_id)
  if (index < 0) {
    acc.push({
      [x.role_id]: [x]
    });
    return acc;
  }
  acc[index] = {
    ...acc[index],
    [x.role_id]: [...acc[index][x.role_id], x]
  }
  return acc;
}, [])

console.log(groupedData);