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)?

stackoverflow.com/questions/15661289/…

Mark Veenstra
– Mark Veenstra

2015-06-18 09:08:17 +00:00
Commented Jun 18, 2015 at 9:08 — Mark Veenstra
– Mark Veenstra, Commented Jun 18, 2015 at 9:08

Dinesh · Accepted Answer · 2015-06-18 09:22:43Z

5

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>

edited Jun 18, 2015 at 9:22

answered Jun 18, 2015 at 9:09

Dinesh

4566 silver badges15 bronze badges

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

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related