I want grouping all the checkbox with single heading like 2nd image

Question

I am fetching all the info from backend and maping it as object, I want to show this like grouping as exact like 2nd image while fetching data I am getting objects with there permissions and there displayName (Read all,Read,Creat,Update) and group(Admin Agent etc) I want to show admin agent name only once which is showing multiple times.

here is backend data which are fetching from backend:

[
  {
    id: 54,
    name: "agent_read_all",
    description: null,
    displayName: "Read all",
    group: "Admin - Agent",
  },
  {
    id: 55,
    name: "agent_read",
    description: "Fetch single record",
    displayName: "Read",
  },
  {
    id: 56,
    name: "agent_create",
    description: null,
    displayName: "Create",
    group: "Admin - Agent",
  },
  {
    id: 57,
    name: "agent_update",
    description: null,
    displayName: "Update",
    group: "Admin - Agent",
  },
  {
    id: 62,
    name: "candidate_upload_batch_read_all",
    description: null,
    displayName: "Read all",
  },
];

2nd image

here is the code :

<b>Permissions Section</b>;
{
  Object.keys(permissions).map((item, index) => (
    <>
      <List style={{ display: "flex" }}>
        <p>{permissions[item].group}</p>
        <FormGroup>
          <FormControlLabel
            control={
              <Checkbox
                checked={uroleData.permissions[index] ? true : false}
                value={roleData.permissionId}
                onChange={(e) => {
                  if (e.target.checked) {
                    checkedp.push(permissions[item].id);
                    setRoleData({ ...roleData, permissionId: checkedp });
                  } else {
                    roleData.permissionId.splice(
                      checkedp.indexOf(e.target.value),
                      1
                    );
                  }
                  // console.log(roleData);
                }}
              />
            }
            label={permissions[item].displayName}
          />
        </FormGroup>
      </List>
    </>
  ));
}

Answer 1

I hope this code helps, you can optimize it as per your needs

const array = [
  { id: 1, displayName: "Create", group: "admin" },
  { id: 2, displayName: "Update", group: "admin" },
  { id: 3, displayName: "Delete", group: "admin" },
  { id: 4, displayName: "all", group: "admin" },
  { id: 11, displayName: "Create", group: "agent" },
  { id: 12, displayName: "Update", group: "agent" },
  { id: 13, displayName: "Delete", group: "agent" },
  { id: 14, displayName: "all", group: "agent" }
];

const dict = {};

for (const item of array) {
  if (item.group in dict) {
    dict[item.group].push({
      displayName: item.displayName,
      id: item.id
    });
  } else {
    dict[item.group] = [
      {
        displayName: item.displayName,
        id: item.id
      }
    ];
  }
}

console.log("dict", dict);

// if you need an array
const list = []

for (const key in dict) {
  list.push({
    group: key,
    items: dict[key] 
  })
}

console.log('list', list)

if group text in unreliable, you can check if group id can be passed