We have a complex json file that we have to handle with JavaScript to make it hierarchical, in order to later build a tree.
Every entry of the JSON array has −
id − a unique id,
parentId − the id of the parent node (which is 0 if the node is a root of the tree)
level − the level of depth in the tree
The JSON data is already "ordered", means that an entry will have above itself a parent node or brother node, and under itself a child node or a brother node.
The input array is −
const arr = [ { "id": "12", "parentId": "0", "text": "Man", "level": "1", "children": null }, { "id": "6", "parentId": "12", "text": "Boy", "level": "2", "children": null }, { "id": "7", "parentId": "12", "text": "Other", "level": "2", "children": null }, { "id": "9", "parentId": "0", "text": "Woman", "level": "1", "children": null }, { "id": "11", "parentId": "9", "text": "Girl", "level": "2", "children": null } ];
And the expected output is −
const output = [ { "id": "12", "parentId": "0", "text": "Man", "level": "1", "children": [ { "id": "6", "parentId": "12", "text": "Boy", "level": "2", "children": [] }, { "id": "7", "parentId": "12", "text": "Other", "level": "2", "children": [] } ] }, { "id": "9", "parentId": "0", "text": "Woman", "level": "1", "children": [ { "id": "11", "parentId": "9", "text": "Girl", "level": "2", "children": [] } ] } ];
Example
The code for this will be −
const arr = [ { "id": "12", "parentId": "0", "text": "Man", "level": "1", "children": null }, { "id": "6", "parentId": "12", "text": "Boy", "level": "2", "children": null }, { "id": "7", "parentId": "12", "text": "Other", "level": "2", "children": null }, { "id": "9", "parentId": "0", "text": "Woman", "level": "1", "children": null }, { "id": "11", "parentId": "9", "text": "Girl", "level": "2", "children": null } ]; const listToTree = (arr = []) => { let map = {}, node, res = [], i; for (i = 0; i < arr.length; i += 1) { map[arr[i].id] = i; arr[i].children = []; }; for (i = 0; i < arr.length; i += 1) { node = arr[i]; if (node.parentId !== "0") { arr[map[node.parentId]].children.push(node); } else { res.push(node); }; }; return res; }; console.log(JSON.stringify(listToTree(arr), undefined, 4));
Output
And the output in the console will be −
[ { "id": "12", "parentId": "0", "text": "Man", "level": "1", "children": [ { "id": "6", "parentId": "12", "text": "Boy", "level": "2", "children": [] }, { "id": "7", "parentId": "12", "text": "Other", "level": "2", "children": [] } ] }, { "id": "9", "parentId": "0", "text": "Woman", "level": "1", "children": [ { "id": "11", "parentId": "9", "text": "Girl", "level": "2", "children": [] } ] } ]