CODEWITHSUNDEEP
javascriptangularjsjsontreeview
Raj
Raj

Reputation: 1

AngularJS TreeView From JSON Object

I am newbie in AngularJS. I need to create a TreeView Structure From JSON Object.

My Return JSON Object is looks like below.

var categoryTree = [{Name:'Item1', Childnodes : {}, id: 1}, 
                 {Name:'Item2', Childnodes : {
                    items = [
                       {Name:'Sub Item21', Childnodes : {}, id: 21}
                       {Name:'Sub Item22', Childnodes : {}, id: 22}   
                    ]
                 }, id: 2}];

Could you please help me to create a AngularJS Tree View. Thanks in Advance.

Upvotes: 0

Views: 3107

Answers (2)

Ajinkya Chanshetty
Ajinkya Chanshetty

Reputation: 31

You can create a Tree view using the Webix framework along with AngularJS.

https://github.com/TheAjinkya/webixTreeWithJava-

https://github.com/TheAjinkya/AngularWebixApplication

treedata = [{
    id: "1",
    value: "Book 1",
    data: [{
        id: "1.1",
        value: "Part 1"
      },
      {
        id: "1.2",
        value: "Part 2"
      }
    ]
  },
  {
    id: "2",
    value: "Book 2",
    data: [{
      id: "2.1",
      value: "Part 1"
    }]
  }
];

tree = new webix.ui({
  view: "tree"
});

tree.parse(treedata)
<script src="https://cdn.webix.com/edge/webix.js"></script>
<link href="https://cdn.webix.com/edge/webix.css" rel="stylesheet" />

Upvotes: 1

Jack Luo
Jack Luo

Reputation: 441

Please use some sort of tree view module. They can make your life much easier. The only thing is that you need to re-format your data structure to the tree module style. You can write a service and do all re-formatting inside a service.

Some tree view module and plugin:

http://ngmodules.org/modules/angular.treeview

https://angular-ui-tree.github.io/angular-ui-tree/#/basic-example

Upvotes: 0

Related Questions