How to recursively render JSON tree as HTML using AngularJS?

Question

Suppose I have the following JSON structure in my javascript as a variable named myTree:

[
    {"name": "A", "children": [
            {"name": "C", "children": []},
            {"name": "D", "children": []},
        ]
    },
    {"name": "B", "children": []}
]

I would like to use AngularJS to render it as the following HTML. How can I do it? FYI, the tree can have arbitrary depth. I have shown only a very simple example here.

<ul>
    <li>
        A
        <ul>
            <li>C</li>
            <li>D</li>
        </ul>
    </li>
    <li>B</li>
</ul>

Saqib Ali · Accepted Answer · 2015-01-08 23:08:25Z

5

You should make recursive templates:

<script type="text/ng-template" id="item_template">
 {{child.name}}
 <ul>
    <li ng-repeat="child in child.children" ng-include="'item_template'">
    </li>
  </ul>
</script>

<ul>
  <li ng-repeat="child in myTree" ng-include="'item_template'">
  </li>
</ul>

So, you will render 'infinite' levels of recursion, no only the first level.

edited Jan 8, 2015 at 23:08

Saqib Ali

12.8k51 gold badges154 silver badges296 bronze badges

answered Jan 8, 2015 at 21:16

Adilson de Almeida Jr

2,75521 silver badges37 bronze badges

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

2 Comments

Saqib Ali Over a year ago

How is this recursive? I don't see any function calling itself here. For it to be recursive, there would have to be a calll from within the <li ng-repeat="child in children"></li> to item_template.

Adilson de Almeida Jr Over a year ago

@Saqib Ali: It was missing a ng-include attribute on the <li> inside the template.

Collectives™ on Stack Overflow

How to recursively render JSON tree as HTML using AngularJS?

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related