How to display all the nested json data using ng-repeat?

Question

This is my JSON data:

"multipleLayerDropdown" : [
                                        {"title":"Google","url":"#"},
                                        {"title":"Another action","url":"#"},
                                        {"title":"Something else here","url":"#"},
                                        {"title":"More options", "submenu":[
                                                                             {"title":"Second Level 1","url":"#"},
                                                                             {"title":"Second Level 2","submenu":[ 
                                                                                                                   {"title":"Third Level 1","url":"#"},
                                                                                                                   {"title":"Third Level 2","url":"#"}
                                                                                                                   ]},
                                                                             {"title":"Second Level 3","url":"#"},
                                                                             {"title":"Second Level 4","submenu":[
                                                                                                                   {"title":"Third Level 1","url":"#"},
                                                                                                                   {"title":"Third Level 2","url":"#"}
                                                                                                                   ]}
                                                                             ]}

                         ]

I would expect something like below:

Google
Another action
Something else here
More options
- Second Level 1
- Second Level 2
  - Third Level 1
  - Third Level 2
- Second Level 3
- Second Level 4
  - Third Level 1
  - Third Level 2

Above example shows only the 3 nested level. If the nested data is more than 3, it will also be displayed. Example, if nested JSON data is 5, 5 of them will be displayed. Anyone know how to display all the nested JSON data (using ng-repeat/any other angularjs method)?

http://stackoverflow.com/questions/15661289/how-can-i-make-recursive-templates-in-angularjs-when-using-nested-objects — Mark Veenstra, Jun 18 '15 at 09:08

Dinesh · Accepted Answer · 2015-06-18T09:22:43.340

Try ng-template withing ng-repeat directive. So we can create tree-structure view.

Plunkr link : http://plnkr.co/edit/UIGyPsbavIC7OpF6DFEQ?p=preview

<script type="text/ng-template" id="tree-structure">
     <ul class="childElement">
        <li ng-repeat="data in data.nodes" ng-include="'tree-structure'"></li>
     </ul>
</script>

<ul class="parentList">
    <li ng-repeat="data in data.nodes" ng-include="'tree-structure'"></li>
</ul>

How to display all the nested json data using ng-repeat?

1 Answers1