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?
you can :
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;
}
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)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; }