如何迭代多级嵌套 JSON 数组？

【问题标题】：How to iterate over multi-level nested JSON array?如何迭代多级嵌套 JSON 数组？
【发布时间】：2020-06-26 12:40:52
【问题描述】：

我有一个 JSON 数组，其结构如下：

[{"a":"b","child":[{"a":"c","child":["a":"d","child":[]]}]

这个数组有任何级别的孩子并且级别是可变的。基本上，我在站点结构上构建了一个 JSON 数组。我需要遍历这个列表并构建一个如下所示的 HTML 结构：

<ul>
 <li>
  <a href="b">
   <ul>
     <li>
       <a href="c">
         <ul>
           <li> <a href="d"> </li>
         </ul>
        </a>
       </li>
      </ul>
    </a>
  </li>
</ul>

请让我知道这是否可以在 AngularJS 中使用 ng-repeat 和 ng-template 实现。

【问题讨论】：

标签： angularjs angularjs-ng-repeat angularjs-ng-template

【解决方案1】：

尝试关注

var app = angular.module('testApp', []);

app.controller('MainCtrl', function($scope) {
  $scope.object = [{"a":"b","child":[{"a":"c","child":[{"a":"d","child":[]}]}]}];
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.14/angular.min.js"></script>
<div ng-app="testApp">
<div ng-controller="MainCtrl">
  <ul>
    <li ng-repeat="node in object" ng-include="'tree'"></li>
</ul>

<!-- recursive template -->
<script type="text/ng-template" id="tree">
    <a href="{{node.a}}">{{node.a}}
        <ul data-ng-if="node.child && node.child.length">
            <li ng-repeat="node in node.child" ng-include="'tree'"></li>
        </ul>
    </a>
</script>
</div>
</div>

【讨论】：