angular-ui-tree, populate the tree from data from DATABASE

Question

I am using the angular-ui-tree library to display the folder structure.

I am storing the node objects in a MongoDB database.

Each node object looks like this

{
   "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 gets filled in this way

data = [ {
           "node_name" : "Folder 1",
           "node_path" : "AAABBB",
           "node_id" : 103,
           "node_parent_path" : "AAA",
           "node_parent_id" : 13,
           "nodes" : [
                        {
                           "node_name" : "Folder 1-1",
                           "node_path" : "AAABBBAAA",
                           "node_id" : 10351,
                           "node_parent_path" : "AAABBB",
                           "node_parent_id" : 103,
                           "nodes" : [
                                        {
                                           "node_name" : "Folder 1-1-1",
                                           "node_path" : "AAABBBAAAAAA",
                                           "node_id" : 415,
                                           "node_parent_path" : "AAABBBAAA",
                                           "node_parent_id" : 10351,
                                           "nodes" : []      
                                         }
                                     ]
                         }, 
                         {
                           "node_name" : "Folder 1-2",
                           "node_path" : "AAABBBBBB",
                           "node_id" : 103531,
                           "node_parent_path" : "AAABBB",
                           "node_parent_id" : 103,
                           "nodes" : [

                                     ]
                         }, 
                     ]
         }, 
         {

           "node_name" : "Folder 2",
           "node_path" : "AAACCC",
           "node_id" : 104,
           "node_parent_path" : "AAA",
           "node_parent_id" : 13,
           "nodes" : []    
         }
]

With this data , the tree would look something like

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

From bunch of nodes stored in the mongoDB using the schema liked shown as above, I want to populate the DATA array to be able to populate a UI Tree..

What would be the best way to do this?

Or are there any better way to store these nodes in the database to make it easier to retrieve that information to populate the tree?

Answer 1

not sure what server language you're using, so i'll keep it very generalized.
you have a couple different options, either a recursive query or build the nested list from a flat list.

1) recursive query: write a function to get all child nodes of an existing node, get the root node, and add results as child nodes to the existing node, running the recursive query function on each returned result as it is returned. this will result in the appropriate structure starting with the root node.

2) associative array: get all the nodes from mongo, put them in an associative array keyed by the node_path. iterate over all items in this list, adding to the 'nodes' list of the appropriate parent by using parent_path as the key to the associative array. then get the root node(s) by path from the associative array and assign it to the 'data' array. you can optionally double-link to enforce the parent reference as well.

in answer 1 you may need to 'dummy' the root node if the root is actually a list. in answer 2 you may need to scan all items in the associative array to pull the ones without a parent_node to create your base root list. feel free to ask followups with more info

good luck!