This is a list that is returned by API and need to convert this to a Tree which can display so a user can select the required permissions.
const list = [
{
resource: 'User',
action: 'Create',
id: 1,
},
{
resource: 'User',
action: 'Edit',
id: 2,
},
{
resource: 'User',
action: 'Delete',
id: 3,
},
{
resource: 'Utility.Rule',
action: 'Create',
id: 4,
},
{
resource: 'Utility.Rule',
action: 'Edit',
id: 5,
},
{
resource: 'Utility.Config',
action: 'Create',
id: 6,
},
];
And need to get converted to a Tree
{
"id": "root",
"name": "MyTree",
"children": [
{
"id": "User",
"name": "User",
"children": [
{
"id": "1",
"name": "Create"
},
{
"id": "2",
"name": "Edit"
},
{
"id": "3",
"name": "Delete"
}
]
},
{
"id": "Utility",
"name": "Utility",
"children": [
{
"id": "Rule",
"name": "Rule",
"Children": [
{
"id": "4",
"name": "Create"
},
{
"id": "5",
"name": "Edit"
}
]
},
{
"id": "Config",
"name": "Config",
"children": [
{
"id": "6",
"name": "Create"
}
]
}
]
}
]
}
I have tried different methods like Map and reduce but not getting desired output.
const arrayToTree = (arr, parent = 'User') =>
arr.filter(item => item.parent === parent)
.map(child => ({ ...child, children: arrayToTree(arr,
child.index) }));
arrayToTree(list, 'User')
//This gives me stackoverflow error.
Other option I tried was to build first the map
function list_to_tree(list) {
var map = {}, node, roots = [], i;
for (i = 0; i < list.length; i += 1) {
map[list[i].id] = i; // initialize the map
list[i].children = []; // initialize the children
}
for (i = 0; i < list.length; i += 1) {
node = list[i];
if (node.parentId !== "0") {
// if you have dangling branches check that map[node.parentId] exists
list[map[node.parentId]].children.push(node);
} else {
roots.push(node);
}
}
return roots;
}
It would be great if I can get some hit how to construct the main node and then add the children.
The solution I came up with was to loop through the list, splitting each resource by '.' and adding a node for each resource directory if not already within the parent node's children
const list = [ { resource: 'User', action: 'Create', id: 1 }, { resource: 'User', action: 'Edit', id: 2 }, { resource: 'User', action: 'Delete', id: 3 }, { resource: 'Utility.Rule', action: 'Create', id: 4 }, { resource: 'Utility.Rule', action: 'Edit', id: 5 }, { resource: 'Utility.Config', action: 'Create', id: 6 }, ]; function arrayToTree(list, rootNode = { id: 'root', name: 'MyTree' }) { const addChild = (node, child) => ((node.children?? (node.children = [])).push(child), child); for (const { id, action, resource } of list) { const path = resource.split('.'); const node = path.reduce( (currentNode, targetNodeId) => currentNode.children?.find(({ id }) => id === targetNodeId)?? addChild(currentNode, { id: targetNodeId, name: targetNodeId }), rootNode ); addChild(node, { id: String(id), name: action }); } return rootNode; } console.log(arrayToTree(list));
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.