Group an array of objects by group id

Question

I have an array of objects. These objects need to be grouped based on the groupID. In addition, it is possible to have nested groups.

Below is an example of the array and what I want the array to look like.

[
    {
        key: "1",
        label: "Random generated 0"
    },
    {
        key: "2",
        groupId: "1",
        label: "Random generated 1"
    },
    {
        key: "3",
        groupId: "1",
        label: "Random generated 2"
    },
    {
        key: "4",
        groupId: "2",
        label: "Random generated 3"
    },
    {
        key: "5",
        groupId: "2",
        label: "Random generated 4"
    },
    {
        key: "6",
        label: "Random generated 5"
    },
    {
        key: "7",
        label: "Random generated 6"
    }
];

Based on the key and the groupId, a nested array should come out like this example

[
    {
        key: "1",
        label: "Random generated 0",
        children: [
            {
                key: "2",
                groupId: "1",
                label: "Random generated 1",
                children: [
                    {
                        key: "4",
                        groupId: "2",
                        label: "Random generated 3"
                    },
                    {
                        key: "5",
                        groupId: "2",
                        label: "Random generated 4"
                    }
                ]
            },
            {
                key: "3",
                groupId: "1",
                label: "Random generated 2"
            }
        ]
    },
    {
        key: "6",
        label: "Random generated 5"
    },
    {
        key: "7",
        label: "Random generated 6"
    }
];

Can you help me in the right direction?

Answer 1

You could take a standard approach with an object for collecting each relation of child/parent and parent/child with a single loop.

The function getTree expects a data set, the property name for the id of the actual object, the parent property, the wanted children name, if not being children and the root value of the parent, if not undefined.

const
    getTree = (data, id = 'id', parent = 'parent', children = 'children', root) => {
        const t = {};
        data.forEach(o => ((t[o[parent]] ??= {})[children] ??= []).push(Object.assign(t[o[id]] ??= {}, o)));
        return t[root][children];
    },
    data = [{ key: "1", label: "Random generated 0" }, { key: "2", groupId: "1", label: "Random generated 1" }, { key: "3", groupId: "1", label: "Random generated 2" }, { key: "4", groupId: "2", label: "Random generated 3" }, { key: "5", groupId: "2", label: "Random generated 4" }, { key: "6", label: "Random generated 5" }, { key: "7", label: "Random generated 6" }],
    tree = getTree(data, 'key', 'groupId');

console.log(tree);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 2

you can :

1. create a recursive function that fill children of an element

   function fillChildren(elem) {
     var children = data.filter(oneData => oneData.groupId === elem.key);
     if (children.length) {
       elem.children = children;
       elem.children.map(fillChildren);
     }
     return elem;
   }
   

2. combine array.filter and array.map to construct a grouped structure

   let grouped = data.filter(elem => !elem.groupId).map(fillChildren);
   

let data = [
    {
        key: "1",
        label: "Random generated 0"
    },
    {
        key: "2",
        groupId: "1",
        label: "Random generated 1"
    },
    {
        key: "3",
        groupId: "1",
        label: "Random generated 2"
    },
    {
        key: "4",
        groupId: "2",
        label: "Random generated 3"
    },
    {
        key: "5",
        groupId: "2",
        label: "Random generated 4"
    },
    {
        key: "6",
        label: "Random generated 5"
    },
    {
        key: "7",
        label: "Random generated 6"
    }
];

function fillChildren(elem) {
  var children = data.filter(oneData => oneData.groupId === elem.key);
  if (children.length) {
    elem.children = children
    elem.children.map(fillChildren);
  }
  return elem;
}


let grouped = data.filter(elem => !elem.groupId).map(fillChildren);

console.log(grouped)