AngularJS TreeView From JSON Object

Question

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.

What did you try so far? What's the issue with it? Kindly don't expect for people to code it for you. — Prerak Sola
– Prerak Sola, Commented Jul 13, 2017 at 15:17

Ajinkya Chanshetty · Accepted Answer · 2017-09-28 13:30:39Z

1

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" />

answered Sep 28, 2017 at 13:30

Ajinkya Chanshetty

315 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jack Luo · Accepted Answer · 2017-07-13 15:23:51Z

0

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

answered Jul 13, 2017 at 15:23

Jack Luo

4515 silver badges6 bronze badges

Collectives™ on Stack Overflow

AngularJS TreeView From JSON Object

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related