Показать JSON как вложенное дерево с угловым

У меня есть это JSON, и мне нужно показать три узла этого как дерево с угловыми js: data.key & data.parentItem & data.title.Показать JSON как вложенное дерево с угловым

это мой JS код:

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>

некоторые из моих JSON пункта являются родители и некоторые темы являются ребенка. как это сделать в отношении родительского и дочернего правил и показать тему в дереве с помощью nLogn?

источник

2016-05-29 Kalagar

Возможный дубликат [Угловое JS делает JSON в дереве, как формат] (http://stackoverflow.com/questions/22168343/angular-js-render-json-in-tree- как-формат) –

Я не понимаю «в отношении родительского и дочернего правила», ваш объект 'data' имеет только один узел детей, вы можете уточнить? –

Также делайте веб-поиск угловую рекурсивную директиву или 'угловой рекурсивный шаблон'. Следует найти множество примеров и руководств – charlietfl

это ответ !!!!

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>

источник

2016-05-31 08:56:38 Kalagar

вы можете использовать эту большую директиву: угловой TreeView

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

она принимает JSON как этот

$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" : [] } 
];

и отобразить его

вам нужно отформатировать немного ваши данные могут быть

источник

2016-05-29 06:59:42 AlainIb

Показать JSON как вложенное дерево с угловым

ответ

Смежные вопросы