How to iterate over multi-level nested JSON array?

Question

I have a JSON array which has a structure like below:

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

This array have have any level of children and the levels are variable. Basically, I've built a JSON array over a site structure. I need to iterate over this list and build a HTML structure like below:

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

Please let me know if this can be achieved in AngularJS using ng-repeat and ng-template.

Answer 1

Try following

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>