Build Tree Array from JSON in JavaScript
Building a tree array from JSON in JavaScript involves converting a JSON object representing a hierarchical structure into an array that reflects the parent-child relationships. This tree array can be useful for various purposes like rendering hierarchical data in UI components performing tree-based operations, or processing data in a structured manner.
Below are the approaches to build a tree array from JSON in JavaScript:
Table of Content
Recursive Approach
This approach recursively traverses the JSON object identifying parent-child relationships and builds the tree array accordingly.
Syntax:
function buildTreeRecursive(jsonObj) {
// Recursive function implementation
}
Example: To demonstrate creating a tree array from JSON in JavaScript using recursion.
function GFG(jsonObj) {
let treeArray = [];
function traverse(node) {
let treeNode =
{
id: node.id,
name: node.name,
children: []
};
if (node.children && node.children.length > 0) {
node
.children
.forEach(child => {
treeNode
.children
.push(traverse(child));
});
}
return treeNode;
}
if (jsonObj && jsonObj.length > 0) {
jsonObj
.forEach(rootNode => {
treeArray
.push(traverse(rootNode));
});
}
return treeArray;
}
const json = [
{
id: 1,
name: "Root",
children: [{ id: 2, name: "Child 1", children: [] }]
},
{
id: 3,
name: "Another Root",
children: [{ id: 4, name: "Child 2", children: [] }]
}
];
const tree = GFG(json);
console.log(tree);
function GFG(jsonObj) { let treeArray = []; function traverse(node) { let treeNode = { id: node.id, name: node.name, children: [] }; if (node.children && node.children.length > 0) { node .children .forEach(child => { treeNode .children .push(traverse(child)); }); } return treeNode; } if (jsonObj && jsonObj.length > 0) { jsonObj .forEach(rootNode => { treeArray .push(traverse(rootNode)); }); } return treeArray;}const json = [ { id: 1, name: "Root", children: [{ id: 2, name: "Child 1", children: [] }] }, { id: 3, name: "Another Root", children: [{ id: 4, name: "Child 2", children: [] }] }];const tree = GFG(json);console.log(tree);Output :
[
{ id: 1, name: 'Root', children: [ [Object] ] },
{ id: 3, name: 'Another Root', children: [ [Object] ] }
]
Iterative Approach
This approach iterates over the JSON object using the stack or queue data structure maintaining parent-child relationships and constructs the tree array iteratively.
Syntax:
function buildTreeIterative(jsonObj) {
// Iterative function implementation
}
Example: To demonstrate creating tree array from JSON in JavaScript using iterative approach.
function GFG(jsonObj) {
let treeArray = [];
let stack = [];
// Initialize stack with root nodes
for (let i = 0; i < jsonObj.length; i++) {
stack
.push({ node: jsonObj[i], parentIndex: -1 });
}
while (stack.length > 0) {
let { node, parentIndex } = stack
.pop();
let treeNode =
{
id: node.id,
name: node.name,
children: []
};
if (parentIndex !== -1) {
treeArray[parentIndex]
.children
.push(treeNode);
} else {
treeArray
.push(treeNode);
}
// Add children nodes to the stack
if (node.children && node.children.length > 0) {
for (let i = node
.children
.length - 1; i >= 0; i--) {
stack
.push({ node: node.children[i], parentIndex: treeArray.length - 1 });
}
}
}
return treeArray;
}
const json = [
{
id: 1,
name: "Root",
children: [{ id: 2, name: "Child 1", children: [] }]
},
{
id: 3,
name: "Another Root",
children: [{ id: 4, name: "Child 2", children: [] }]
}
];
// Build tree using the iterative approach
const tree = GFG(json);
console.log(tree);
function GFG(jsonObj) { let treeArray = []; let stack = []; // Initialize stack with root nodes for (let i = 0; i < jsonObj.length; i++) { stack .push({ node: jsonObj[i], parentIndex: -1 }); } while (stack.length > 0) { let { node, parentIndex } = stack .pop(); let treeNode = { id: node.id, name: node.name, children: [] }; if (parentIndex !== -1) { treeArray[parentIndex] .children .push(treeNode); } else { treeArray .push(treeNode); } // Add children nodes to the stack if (node.children && node.children.length > 0) { for (let i = node .children .length - 1; i >= 0; i--) { stack .push({ node: node.children[i], parentIndex: treeArray.length - 1 }); } } } return treeArray;}const json = [ { id: 1, name: "Root", children: [{ id: 2, name: "Child 1", children: [] }] }, { id: 3, name: "Another Root", children: [{ id: 4, name: "Child 2", children: [] }] }];// Build tree using the iterative approachconst tree = GFG(json);console.log(tree);Output:
[
{ id: 3, name: 'Another Root', children: [ [Object] ] },
{ id: 1, name: 'Root', children: [ [Object] ] }
]
