0

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!

Tream
  • 1,049
  • 2
  • 13
  • 29
  • 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 Oct 23 '14 at 13:29
  • what have you tried?...did you try ngRepeat in the documentation https://docs.angularjs.org/api/ng/directive/ngRepeat you can pull the $first $middle $last – user3271518 Oct 23 '14 at 13:30
  • What I came up with so far is:
    • {{row.Name}}
    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 Oct 23 '14 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: http://stackoverflow.com/questions/14430655/recursion-in-angular-directives and there is a Plunkier included that works very closely to what you want. – Mike Oct 23 '14 at 14:09

1 Answers1

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>