AngularJS: How to display nested objects?

Question

I have following (json) object:

[
  {
     name: "Foo",
     children: [{
        name: "bar",
        children:[{
           ...
        }]
     }]
  }

]

There can be any number of children/objects in any level. Now I want to get following HTML Code:

<ul>
   <li>Foo</li>
   <li>
      <ul>
         <li>Bar</li>
      </ul>
   </li>
<ul>

But of course there could be 10 or more levels with 20 or more children per level.

Is there any way to do that? Thank you very much!

There is a way to do it! SO is usually very helpful in guiding people on how to fix their problems, but we don't write code for free for people who haven't done anything. What have you tried? — Adam Jenkins
– Adam Jenkins, Commented Oct 23, 2014 at 13:29
what have you tried?...did you try ngRepeat in the documentation docs.angularjs.org/api/ng/directive/ngRepeat you can pull the $first $middle $last — user3271518
– user3271518, Commented Oct 23, 2014 at 13:30
What I came up with so far is: <ul ng-controller="expCtrl"> <li ng-repeat="row in data"> {{row.Name}} </li> </ul> But this will only display the first level. Now I could add the second level by hand, and the 3rd, and so on. But since I dont know how many levels there will be, I need some general solution. — Tream
– Tream, Commented Oct 23, 2014 at 13:33
You need to implement a recursive approach in some fashion, so that it can go into whatever depth ends up occurring in the object. There is a similar questions/answer at: stackoverflow.com/questions/14430655/… and there is a Plunkier included that works very closely to what you want. — Mike
– Mike, Commented Oct 23, 2014 at 14:09

user4079725 · Accepted Answer · 2014-10-23 13:47:24Z

4

this should work, just replace json array with your data

    <script type="text/ng-template" id="nodes_renderer.html">
        {{node.name}}
        <ul ng-model="node.children" ng-class="{hidden: collapsed}">
            <li ng-repeat="node in node.children" ng-include="'nodes_renderer.html'">
            </li>
        </ul>
    </script>

    <div data-drag-enabled="false">
        <ul>
            <li ng-repeat="node in @*JSON ARRAY*@" ng-include="'nodes_renderer.html'">    
            </li>
        </ul>
    </div>

answered Oct 23, 2014 at 13:47

user4079725

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

Collectives™ on Stack Overflow

AngularJS: How to display nested objects?

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related