Скачать или смотреть Building a Tree Structure from a Normalized Tree List in JavaScript

Learn how to create a hierarchical tree structure from a normalized tree list in JavaScript using recursive and non-recursive methods.
---
This video is based on the question https://stackoverflow.com/q/73215812/ asked by the user 'Joji' ( https://stackoverflow.com/u/7624223/ ) and on the answer https://stackoverflow.com/a/73215855/ provided by the user 'CertainPerformance' ( https://stackoverflow.com/u/9515207/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: How can I build a tree from a normalized tree list

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
How to Build a Tree Structure from a Normalized Tree List in JavaScript

Creating complex data structures is common when working with hierarchical data representation. A common challenge developers face is transforming a normalized tree list—where each node holds its children as identifiers—into a more usable tree format. If you're wondering, how can I build a tree from a normalized tree list? you've come to the right place! In this guide, we’ll explore a simple yet effective way to accomplish this using JavaScript.

Understanding the Problem

A normalized tree list typically consists of objects where each object has an id, a title, and a list of childIds pointing to its children. An example normalized tree list could look like this:

[[See Video to Reveal this Text or Code Snippet]]

Our goal is to convert this structure into a nested tree format that looks like the following:

[[See Video to Reveal this Text or Code Snippet]]

The Solution: Recursive Method

To successfully build the tree, we can take advantage of recursion. Recursive functions can simplify the logic considerably. We need an approach where we start from the root node and work through its childIds, allowing each recursive call to explore further down the structure.

Step-By-Step Implementation

Here’s how we can implement the recursive solution:

Create a Recursive Function: This function will take an id and return the respective tree node, including its children.

Extract Node Data: For the given id, retrieve the title and childIds from the normalized tree.

Build Child Structure: For each childId, call the same function to build its structure recursively.

Here’s the implementation in JavaScript:

[[See Video to Reveal this Text or Code Snippet]]

Explanation

The buildTree function extracts the title and children IDs for a node.

It creates a new object representing the current node and recursively constructs childPlaces using the childIds.

This leads to a foray into each child recursively until all elements are transformed into the desired structure.

Alternative Approach: Non-Recursive Method

While recursion is elegant, it’s not always a preferred solution due to potential stack overflow with deep recursion. An iterative solution can be accomplished as well, although it tends to be somewhat more cumbersome.

Steps to Implement the Non-Recursive Method

Create a New Tree Structure: First, create a structure for each node with childPlaces.

Map IDs to Nodes: Populate this structure based on the normalizedTree.

Link Nodes: Iterate over each node and assign children based on IDs.

Here’s an example of how this can be done:

[[See Video to Reveal this Text or Code Snippet]]

Key Differences

Structured Iteration: The non-recursive method uses two iterations, one for creating nodes and another for linking them.

Avoiding Recursion Depth Issues: This method is safer in terms of preventing stack overflow.

Conclusion

Transforming a normalized tree list into a hierarchical structure can be approached systematically using either a recursive or non-recursive method. The recursive method offers a cleaner and more straightforward approach, while the non-recursive method ensures that we avoid pitfalls associated with deep recursion.

Choose the approach that best fits your needs and enjoy building your trees in JavaScript! Happy coding!