angular-ui-tree, dynamically generate the tree using data retrieved from the DATABASE

Question

angular-ui-tree, dynamically generate the tree using data retrieved from the DATABASE

I have implemented the angular-ui-tree library to present the folder hierarchy.

The nodes are saved in a MongoDB database, with each node object structured as follows:

{
   "node_name" : "Folder 1",
   "node_path" : "AAABBB",
   "node_id" : 103,
   "node_parent_path" : "AAA",
   "node_parent_id" : 13,
   "template" : "Template 1"
}

The Angular-UI-TREE is populated like this:

data = [
    {
        "node_name": "Folder 1",
        ...
        "nodes": [
            {
                "node_name": "Folder 1-1",
                ...
                "nodes": [
                    {
                        "node_name": "Folder 1-1-1",
                        ...
                        "nodes": []
                    }
                ]
            },
            {
                "node_name": "Folder 1-2",
                ...
                "nodes": []
            }
        ]
    },
    {
        "node_name": "Folder 2",
        ...
        "nodes": []
    }
]

Using this structure, the tree will display folders and subfolders similar to:

Folder 1 
|
---> Folder 1-1
     |
     ---> Folder 1-1-1
|
---> Folder 1-2
Folder 2

Given the nodes stored in MongoDB following the specified schema, I aim to populate the DATA array for building the UI tree. What would be the most efficient approach to achieve this?

Alternatively, is there a better way to organize and store these nodes in the database to simplify retrieving the information required to build the tree?

javascript angularjs arrays tree angular-ui-tree

Answer 1

Answer №1

It's difficult to determine the server language you're using, so I'll provide a general approach.
You have two main options: either implement a recursive query or construct a nested list from a flat list.

1) Recursive Query: Develop a function that retrieves all child nodes of a given node, identifies the root node, and appends the results as child nodes to the original node. Execute the recursive query function on each returned result to create the desired structure starting with the root node.

2) Associative Array: Retrieve all nodes from MongoDB and organize them in an associative array indexed by the node paths. Traverse this array and append each item to the 'nodes' list of its parent node using the parent path as the key. Obtain the root node(s) by their paths from the associative array and assign them to the 'data' array. Optionally, establish double links to enforce the parent reference.

In option 1, consider creating a placeholder for the root node if it is actually a list. For option 2, scan through all items in the associative array to identify those without a parent node and form your base root list. Feel free to ask any additional questions for further clarification.

Best of luck!

Answer 2

It's difficult to determine the server language you're using, so I'll provide a general approach.
You have two main options: either implement a recursive query or construct a nested list from a flat list.

1) Recursive Query: Develop a function that retrieves all child nodes of a given node, identifies the root node, and appends the results as child nodes to the original node. Execute the recursive query function on each returned result to create the desired structure starting with the root node.

2) Associative Array: Retrieve all nodes from MongoDB and organize them in an associative array indexed by the node paths. Traverse this array and append each item to the 'nodes' list of its parent node using the parent path as the key. Obtain the root node(s) by their paths from the associative array and assign them to the 'data' array. Optionally, establish double links to enforce the parent reference.

In option 1, consider creating a placeholder for the root node if it is actually a list. For option 2, scan through all items in the associative array to identify those without a parent node and form your base root list. Feel free to ask any additional questions for further clarification.

Best of luck!

angular-ui-tree, dynamically generate the tree using data retrieved from the DATABASE

Answer №1

Similar questions

Generating binary payload with Node-RED

Using Vue to iterate through elements

Experimenting with the input type generated by the Form Helper tool

The Google Pie chart is displaying outside of the designated div area when placed inside a dropdown menu

Turn off the extra space inserted by DataTables

Unable to render a rectangle with React's canvas context.fillRect

Modify the Div background color by accessing the HEX value saved in a JSON file

I am attempting to locate a specific char[] within a two-dimensional char array and store the value of the index n where it was found

Can you please provide the appropriate PropTypes for a dictionary in a ReactJS project?

Unique: "Unique One-Step Deviation in Date Comparison"

Is it possible to use square brackets in conjunction with the "this" keyword to access a class property using an expression?

Highcharts displaying black color after AJAX refresh

Determining the size of an image prior to uploading it in a React

I am having trouble accessing my JSON data via HTTP get request in Angular 2 when using TypeScript

The selected attribute does not function properly with the <option> tag in Angular

Using axiosjs to send FormData from a Node.js environment

What is causing the delay in retrieving elements using getX() method in Selenium?

problem with transmitting information through $.ajax

Perplexing behavior displayed by non-capturing group in JavaScript regular expressions

Persistent vertical menu dropdown that remains expanded on sub menu pages