need to convert complex json obj to suitable angularjs ui tree data json structure

Question

In my angularjs project I have original json in the following format :

$scope.orgJsonObj = {  
  "parentNodesList":[  
    "0",
    "1",
    "1.1",
    "2",
    "2.2"
  ],
  "childNodes":{  
    "0":[  
      "1",
      "2"
    ],
    "1":[  
      "1.1",
      "1.2"
    ],
    "1.1":[  
      "1.1.1"
    ],
    "2":[  
      "2.1",
      "2.2"
    ],
    "2.2":[  
      "2.2.1",
      "2.2.3"
    ]
  },
  "nodeDetailsList":[  
    {  
      "id":"0",
      "name":"node0"
    },
    {  
      "id":"1",
      "name":"node1",
      "parentId":"0"
    },
    {  
      "id":"2",
      "name":"node2",
      "parentId":"0"
    },
    {  
      "id":"1.1",
      "name":"node1.1",
      "parentId":"1"
    },
    {  
      "id":"1.2",
      "name":"node1.2",
      "parentId":"1"
    },
    {  
      "id":"1.1.1",
      "name":"node1.1.1",
      "parentId":"1.1"
    },
    {  
      "id":"2.1",
      "name":"node2.1",
      "parentId":"2"
    },
    {  
      "id":"2.2",
      "name":"node2.2",
      "parentId":"2"
    },
    {  
      "id":"2.2.1",
      "name":"node2.2.1",
      "parentId":"2.2"
    },
    {  
      "id":"2.2.3",
      "name":"node2.2.3",
      "parentId":"2.2"
    }
  ]
}

Now I want to convert orgJsonObj json structure in to the tree structure similar to angular ui tree json data structure. In orgJsonObj, parentNodesList contains all parents in the tree. Each parent's children list is available in childNodes. Each nodes complete information is available in nodeDetailsList. The node obj { "id":"0", "name":"node0"} does not have parentId, property in it because it is the root of the tree.

After conversion my $scope.orgJsonObj, should become as shown below (which is suitable for angularjs ui tree)

$scope.finalJsonObj = [  
  {  
    "id":"0",
    "title":"node0",
    "nodes":[  
      {  
        "id":"1",
        "title":"node1",
        "nodes":[  
          {  
            "id":"1.1",
            "title":"node1.1",
            "nodes":[  
              {  
                "id":"1.1.1",
                "title":"node1.1.1",
                "nodes":[  

                ]
              }
            ]
          },
          {  
            "id":"1.2",
            "title":"node1.2",
            "nodes":[  

            ]
          }
        ]
      },
      {  
        "id":"2",
        "title":"node2",
        "nodes":[  
          {  
            "id":"2.1",
            "title":"node2.1",
            "nodes":[  

            ]
          },
          {  
            "id":"2.2",
            "title":"node2.2",
            "nodes":[  
              {  
                "id":"2.2.1",
                "title":"node2.2.1",
                "nodes":[  

                ]
              },
              {  
                "id":"2.2.3",
                "title":"node2.2.3",
                "nodes":[  

                ]
              }
            ]
          }
        ]
      }
    ]
  }
]

Can any one help me in this.

score 1 · Accepted Answer · answered Sep 08 '16 at 13:59

1

var originalData = {};

var treeData = transformNesting("0", originalData.childNodes);
var result = applyData(treeData, originalData.nodeDetailsList);

function transformNesting(root, nestedData){
    var tree = {
        id: root,
        nodes: nestedData[root] ? nestedData[root].map(function(newRoot){ return transformNesting(newRoot, nestedData)}) : []
    };
    return tree;
}

function getNodeById(list, id){
    return list.filter(function(item){
       return item.id === id;
    })[0];
}

function applyData(tree, config){
    tree.title = getNodeById(config, tree.id).name;
    tree.nodes =  tree.nodes.map(function(node){return applyData(node, config)});
    return tree;
}

answered Sep 08 '16 at 13:59

Valery Kozlov

1,557
2
11
19

hi @Valery Kozlov, do you have jsfiddle for this – Feb 21 '18 at 07:28
i want to transform this data to tree `data = [{ "id": 1,"parent": 0,"name":"Parent"}, { "id": 2, "parent": 1,"name": "Child 1"}, {"id": 3, "parent": 2,"name": "Grand Child 1"}, { "id": 4, "parent": 2, "name": "Grand Child 2"}, {"id": 5, "parent": 1, "name": "Child 2"} ,{ "id": 11, "parent": 0, "name": "Parent"}, { "id": 22, "parent": 11, "name": "Child 22 22"}, { "id": 33, "parent": 22, "name": "Grand Child 22 33"}, {"id": 44, "parent": 22, "name": "Grand Child 22 44" }, { "id": 55, "parent": 11, "name": "Child 22 55" }];` – Feb 21 '18 at 07:33
is opposite task, have no time to code it right now, sry. – Valery Kozlov Feb 26 '18 at 12:36
ok thank you i have already got the solution , check here https://stackoverflow.com/questions/48910947/how-to-make-desired-json-tree-from-simple-json/48914207#48914207 – Feb 27 '18 at 04:15

need to convert complex json obj to suitable angularjs ui tree data json structure

1 Answers1