Build Tree Array from Flat Array in JavaScript
Last Updated :
01 Apr, 2024
To convert a flat array of comments into a tree-like structure using JavaScript. This technique is particularly useful when you need to render nested comments or any other hierarchical data in your web application. We will write a function called buildCommentsTree that takes the flat array of comments as input and returns a tree-like array of comments.
Below are the approaches to build a tree array from a flat array in javascript:
Using a Loop and Object References
This approach involves creating a map or a reference object to store all the nodes. We loop through the flat array and create the tree array by linking the child nodes to their parent nodes using the reference object. It utilizes a "nodeMap" to efficiently store and retrieve comments by their IDs, initializing each comment with an empty "children" array. By iterating over the flat array twice, it constructs the tree array, linking comments to their respective parent comments.
Example: Implementation of Building a tree array from a flat array in JavaScript Using a Loop and Object References.
JavaScript
const flatComments = [
{ id: 1, parentId: null, author: 'Jeetu',
content: 'This is a great article!' },
{ id: 2, parentId: 1, author: 'Mihika',
content: 'I agree, very informative.' },
{ id: 3, parentId: 2, author: 'Disha',
content: 'I added more Examples in this article' },
{ id: 4, parentId: null, author: 'Shravan',
content: 'Great, Thanks!!' },
];
function buildTreeArray(flatArray) {
// Store references to nodes by their IDs
const nodeMap = {};
// Store the root nodes of the tree
const result = [];
// Create a reference object
flatArray.forEach(item => {
nodeMap[item.id] = { ...item, children: [] };
});
// Build the tree array
flatArray.forEach(item => {
const node = nodeMap[item.id];
if (item.parentId !== null) {
nodeMap[item.parentId].children.push(node);
} else {
result.push(node);
}
});
return result;
}
const commentsTree = buildTreeArray(flatComments);
console.log(JSON.stringify(commentsTree, null, 2));
Output:
[
{
"id": 1,
"parentId": null,
"author": "Jeetu",
"content": "This is a great article!",
"children": [
{
"id": 2,
"parentId": 1,
"author": "Mihika",
"content": "I agree, very informative.",
"children": [
{
"id": 3,
"parentId": 2,
"author": "Disha",
"content": "I added more Examples in this article",
"children": []
}
]
}
]
},
{
"id": 4,
"parentId": null,
"author": "Shravan",
"content": "Great, Thanks!!",
"children": []
}
]
Using Array.prototype.reduce()
This approach uses the reduce method to iterate over the flat array the code transforms a flat array of comments into a tree-like structure, where each comment may have child comments. It employs a node map to efficiently store and access comments by their IDs, utilizing the 'reduce' function to build the map. The resulting tree array represents the hierarchy of comments, with root nodes stored in the 'result' array and children nested within their respective parents.
Example: Implementation of Building a tree array from a flat array in JavaScript Using Array.prototype.reduce().
JavaScript
const flatComments = [
{ id: 1, parentId: null, author: 'Jeetu',
content: 'This is a great article!' },
{ id: 2, parentId: 1, author: 'Mihika',
content: 'I agree, very informative.' },
{ id: 3, parentId: 2, author: 'Disha',
content: 'I added more Examples in this article' },
{ id: 4, parentId: null, author: 'Shravan',
content: 'Great, Thanks!!' },
];
function buildTreeArray(flatArray) {
// Store the root nodes of the tree
const result = [];
// Use reduce to create a nodeMap
const nodeMap = flatArray.reduce((acc, item) => {
acc[item.id] = { ...item, children: [] };
return acc;
}, {});
// Iterate through flatArray to build the tree
flatArray.forEach(item => {
if (item.parentId === null) {
result.push(nodeMap[item.id]);
} else {
nodeMap[item.parentId].children
.push(nodeMap[item.id]);
}
});
return result;
}
const commentsTree = buildTreeArray(flatComments);
console.log(JSON.stringify(commentsTree, null, 2));
Output:
[
{
"id": 1,
"parentId": null,
"author": "Jeetu",
"content": "This is a great article!",
"children": [
{
"id": 2,
"parentId": 1,
"author": "Mihika",
"content": "I agree, very informative.",
"children": [
{
"id": 3,
"parentId": 2,
"author": "Disha",
"content": "I added more Examples in this article",
"children": []
}
]
}
]
},
{
"id": 4,
"parentId": null,
"author": "Shravan",
"content": "Great, Thanks!!",
"children": []
}
]
Using Recursion
This approach involves creating a recursive function that constructs the tree array by recursively building the child nodes for each parent node. Finally, it filters the flat array for root nodes and maps each root node to its corresponding tree structure, resulting in a nested tree array.
Example: Implementation of Building a tree array from a flat array in JavaScript Using Recursion.
JavaScript
const flatComments = [
{ id: 1, parentId: null, author: 'Jeetu',
content: 'This is a great article!' },
{ id: 2, parentId: 1, author: 'Mihika',
content: 'I agree, very informative.' },
{ id: 3, parentId: 2, author: 'Disha',
content: 'I added more Examples in this article' },
{ id: 4, parentId: null, author: 'Shravan',
content: 'Great, Thanks!!' },
];
function buildTreeArray(flatArray) {
// Use reduce to create a nodeMap
const nodeMap = flatArray.reduce((acc, item) => {
acc[item.id] = { ...item, children: [] };
return acc;
}, {});
// Recursive function to build nodes
const buildNode = id => {
const node = nodeMap[id];
if (!node) return null;
// Filter flatArray for items with parentId === id
node.children = flatArray
.filter(item => item.parentId === id)
.map(item => buildNode(item.id));
return node;
};
// Filter flatArray for root nodes
return flatArray.filter(item => item.parentId === null)
.map(item => buildNode(item.id));
}
const commentsTree = buildTreeArray(flatComments);
console.log(JSON.stringify(commentsTree, null, 2));
Output:
[
{
"id": 1,
"parentId": null,
"author": "Jeetu",
"content": "This is a great article!",
"children": [
{
"id": 2,
"parentId": 1,
"author": "Mihika",
"content": "I agree, very informative.",
"children": [
{
"id": 3,
"parentId": 2,
"author": "Disha",
"content": "I added more Examples in this article",
"children": []
}
]
}
]
},
{
"id": 4,
"parentId": null,
"author": "Shravan",
"content": "Great, Thanks!!",
"children": []
}
]
Practical Example of Building tree array from a flat array in JavaScript
This example uses a Loop and Object References to build a tree view of comments from the "flatComments" array data and then render it in web view using the renderCommentsTree() function which interacts with HTML Code. Use CSS for a better look.
Example: Practical Example of Building a tree array from a flat array in JavaScript.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Comments Tree</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h3>Practical Example of Building tree
array from flat array in JavaScript
</h3>
<div id="comments-container"></div>
<script src="script.js"></script>
</body>
</html>
/* style.css*/
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #f2f2f2;
color: #333;
}
h3 {
text-align: center;
color: #2c6e49;
}
.comment {
border: 1px solid #c5d6c7;
border-radius: 4px;
padding: 10px;
margin-bottom: 10px;
background-color: #e8f5e9;
}
.comment-author {
font-weight: bold;
margin-bottom: 5px;
color: #2c6e49;
}
.comment-content {
margin-bottom: 10px;
}
.replies {
margin-left: 20px;
}
// script.js
// Flat array of comments
const flatComments = [
{ id: 1, parentId: null, author: 'Jeetu',
content: 'This is a great article!' },
{ id: 2, parentId: 1, author: 'Mihika',
content: 'I agree, very informative.' },
{ id: 3, parentId: 1, author: 'Disha',
content: 'I was wondering if you could provide more examples on the topic?' },
{ id: 4, parentId: 3, author: 'Shravan',
content: 'Ohhk!!' },
{ id: 6, parentId: 4, author: 'Shravan',
content: 'I added more Examples!!' },
{ id: 7, parentId: 6, author: 'Disha',
content: 'Great, thanks!' }
];
// Build the tree array
function buildCommentsTree(flatComments) {
const nodeMap = {};
const result = [];
// Create a reference object
flatComments.forEach(comment => {
nodeMap[comment.id] =
{ ...comment, children: [] };
});
// Build the tree array
flatComments.forEach(comment => {
const node = nodeMap[comment.id];
if (comment.parentId !== null) {
nodeMap[comment.parentId]
.children.push(node);
} else {
result.push(node);
}
});
return result;
}
const commentsTree = buildCommentsTree(flatComments);
// Render the comments tree in the webview
function renderCommentsTree(commentsTree) {
const commentsContainer =
document.getElementById('comments-container');
function renderComment(comment, level = 0) {
const commentElement =
document.createElement('div');
commentElement.classList.add('comment');
commentElement.style.marginLeft = `${level * 20}px`;
commentElement.innerHTML = `
<div class="comment-author">${comment.author}</div>
<div class="comment-content">${comment.content}</div>
<div class="replies"></div>`;
const repliesContainer =
commentElement.querySelector('.replies');
comment.children.forEach(child => {
repliesContainer
.appendChild(renderComment(child, level + 1));
});
return commentElement;
}
commentsTree.forEach(comment => {
commentsContainer.appendChild(renderComment(comment));
});
}
renderCommentsTree(commentsTree);
Output:
Output
Similar Reads
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
3 min read
How to deep flatten an array in JavaScript?
In this article, we will learn how to deep flatten an array in JavaScript. The flattening of an array is a process of merging a group of nested arrays present inside a given array. Deep flattening means that the array would be completely flattened. Example: Input: [1,2,3,4,5,[6,[7,8,9]]] Output: [1,
2 min read
Remove empty elements from an array in JavaScript
Here are different approaches to remove empty elements from an Array in JavaScript. 1. Using array.filter() MethodThe array filter() method is used to create a new array from a given array consisting of elements that satisfy given conditions. array.filter( callback( element, index, arr ), thisValue
3 min read
How to Merge/Flatten an array of arrays in JavaScript ?
Merging or flattening an array of arrays in JavaScript involves combining multiple nested arrays into a single-level array. This process involves iterating through each nested array and appending its elements to a new array, resulting in a flattened structure. To Merge or flatten array we can use ar
3 min read
How to Filter an Array in JavaScript ?
The array.filter() method is used to filter array in JavaScript. The filter() method iterates and check every element for the given condition and returns a new array with the filtered output. Syntax const filteredArray = array.filter( callbackFunction ( element [, index [, array]])[, thisArg]);Note:
2 min read
Difference Between Array.from and Array.of in JavaScript
JavaScript provides various methods for creating and manipulating arrays, two of which are Array.from and Array.of. These methods are part of the ECMAScript 6 (ES6) specification and offer distinct ways to create arrays. Understanding the differences between these two methods is important for effici
3 min read
How to Remove Duplicate Objects from an Array in JavaScript?
In JavaScript, it's a common example that the arrays contain objects and there might be a possibility that the objects may or may not be unique. Removing these duplicate objects from the array and getting the unique ones is a common task in Web Development. These are the following approaches: Table
2 min read
How to Create Nested Arrays from a Nest of Arrays in JavaScript ?
Creating nested arrays from a nest of arrays in JavaScript involves organizing multiple arrays into a hierarchical structure, which is often useful for managing and representing complex data relationships. This process entails encapsulating arrays within other arrays to form multi-dimensional struct
3 min read
Create a Comma Separated List from an Array in JavaScript
Here are the different methods to create comma separated list from an Array 1. Array join() methodThe Array join() method joins the elements of the array to form a string and returns the new string. The elements of the array will be separated by a specified separator. [GFGTABS] JavaScript let a = [
3 min read
JavaScript - Create Array of Objects From Multiple Arrays
Here are the different methods to create an array of objects from multiple arrays in JavaScript: 1. Using map (Most Popular Approach)The map method is widely used because it is simple, concise, and works efficiently for arrays of the same length. [GFGTABS] JavaScript const a = ["apple",
3 min read