Show JSON as nested tree with AngularJS

Question

I have this JSON and i need to show three node of this as tree with angular js : data.key & data.parentItem & data.title.

This is my js code:

var phonecatApp = angular.module('myApp', [])
phonecatApp.controller('myController', function myController($scope, $http) {
  $http.get('https://api.zotero.org/users/475425/collections/9KH9TNSJ/items?format=json')
    .then(function (response) {
      var data = response.data

      data = data.filter(function (obj) {
          return true
        })
        .map(function (obj) {
          return {
            key: obj.key,
            parentItem: obj.data.parentItem,
            title: obj.data.title
          }
        })

      var log = []
      var parent = angular.forEach(data, function (value, key) {
        if (value.parentItem === undefined) {
          this.push(value)
        }
      }, log)
      $scope.paR = log

      var nlog = []
      var children = angular.forEach(data, function (value, key) {
        if (value.parentItem !== undefined) {
          this.push(value)
        }
      }, nlog)
      $scope.chilD = nlog
    })
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <title>Hello</title>
  <link href=" css/bootstrap.min.css " type="text/css " rel="stylesheet ">
  <link href="themes/default/style.min.css " type="text/css " rel="stylesheet ">
  <link href="css/angular-json-human.min.css" type="text/css" rel="stylesheet">
</head>

<body ng-controller="myController ">
  <div>
    <ul ng-repeat="myJ in paR">
      <li>
        <h3>{{myJ.key}}</h3></li>
      <li>{{myJ.title}}</li>
    </ul>
    <ul ng-repeat="myN in chilD">
        <li>
          <h3 style="color:red">{{myN.key}}</h3></li>
        <li>{{myN.title}}</li>
      </ul>
  </div>

  <script src="js/angular.min.js "></script>
  <script src="js/jquery-1.12.4.min.js "></script>
  <script src="js/bootstrap.min.js "></script>
  <script src="js/npm.js "></script>
  <script src="js/jstree.min.js "></script>
  <script src="tree.js "></script>
</body>

</html>

Some of my JSON item are parent and some of theme are child. how to do it with respect to parent and child rule and show theme in a tree with nLogn?

Possible duplicate of Angular JS render JSON in tree like format — T J
– T J, Commented May 29, 2016 at 6:49
I don't understand "with respect to parent and child rule" your data object has only one node of children, can you elaborate? — Amin Jafari
– Amin Jafari, Commented May 29, 2016 at 6:55
Also do a web search for angular recursive directive or angular recursive template. Should find numerous examples and tutorials — charlietfl
– charlietfl, Commented May 29, 2016 at 7:13

AlainIb · Accepted Answer · 2016-05-29 06:59:42Z

1

you can use this great directive : angular treeview

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

it take a json like this

$scope.treedata = 
[
    { "label" : "User", "id" : "role1", "children" : [
        { "label" : "subUser1", "id" : "role11", "children" : [] },
        { "label" : "subUser2", "id" : "role12", "children" : [
            { "label" : "subUser2-1", "id" : "role121", "children" : [
                { "label" : "subUser2-1-1", "id" : "role1211", "children" : [] },
                { "label" : "subUser2-1-2", "id" : "role1212", "children" : [] }
            ]}
        ]}
    ]},
    { "label" : "Admin", "id" : "role2", "children" : [] },
    { "label" : "Guest", "id" : "role3", "children" : [] }
];

and display it

you need to format a little your data maybe

answered May 29, 2016 at 6:59

AlainIb

4,6156 gold badges42 silver badges67 bronze badges

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

Comments

Kalagar · Accepted Answer · 2016-05-31 08:56:38Z

this is the answer !!!!

var phonecatApp = angular.module('myApp', [])
phonecatApp.controller('myController', function myController($scope, $http) {
  $http.get('https://api.zotero.org/users/475425/collections/9KH9TNSJ/items?format=json')
    .then(function(response) {
      var data = response.data

      data = data.filter(function(obj) {
          return true
        })
        .map(function(obj) {
          return {
            key: obj.key,
            parentItem: obj.data.parentItem,
            title: obj.data.title
          }
        })
      console.log(data)

      $scope.getParentData = function() {
        var log = []

        angular.forEach(data, function(value, key) {
          if (value.parentItem === undefined) {
            this.push(value)
          }
        }, log)
        return log
        console.log(log)
      }

      $scope.getChilds = function(p) {
        var log = []

        angular.forEach(data, function(value, key) {
          if (!value.parentItem || value.parentItem !== p.key) {
            return
          }
          this.push(value)
        }, log)
        return log
        console.log(log)
      }
    })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <title>nested tree</title>
</head>

<body ng-controller="myController" class="container">

  <ul>
    <li ng-repeat="myPar in getParentData()">
      <h4>{{myPar.title}}</h4>
      <ul>
        <li ng-repeat="myChild in getChilds(myPar)">
          <p>{{myChild.title}}</p>
        </li>
      </ul>
    </li>
  </ul>
</body>

</html>

Collectives™ on Stack Overflow

Show JSON as nested tree with AngularJS

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related