Angular ng-repeat over child objects

Question

i have a data model which is an array having some object. these object may contain some child objects.so how to run ng-repeat on both these in one ng-repeat attribue.. here is an examle JSON

[
    {
        "foo": "bar",
        "values": null,
        "children": [
            {
                "foo": "bar",
                "values": null,
                "children": null
            }
        ]
    },
    {
        "foo": "bar",
        "children": [
            {
                "id": 1,
                "ques": "something"
            }
        ]
    }
]

Possible duplicate of [Angularjs: understanding a recursive directive](http://stackoverflow.com/questions/19125551/angularjs-understanding-a-recursive-directive) — Grundy, Nov 04 '15 at 14:53
@user332863 Please accept the correct answer or tell us whats not working. — AntiHeadshot, Nov 04 '15 at 15:04

score 0 · Answer 1 · answered Nov 04 '15 at 13:51

For example:

<div ng-repeat="object in objects">
  <div ng-repeat="child in object">
    {{child}}
  </div>
</div>

where objects is your main object you receive from for example http request, and child is a child within an object. You can go as deep in the child's of object as many child's your objects have.

In your case:

<div ng-repeat="object in objects">
   {{object.foo}} {{object.values}}
  <div ng-repeat="child in object">
    {{child.id}} {{child.ques}}
  </div>
</div>

score 0 · Answer 2 · answered Nov 04 '15 at 14:00

Use your preferred collection-manipulation library to convert that to an array of the children.

For example, in lodash: _.flatten(_.pluck(yourArray, 'children')) (I think there's a chaining version of that too?)

Then just iterate over it normally.

The Manipulation could be done in the controller to set a variable on scope, or as a function defined on scope, or done inline in html.

score 0 · Answer 3 · answered Nov 04 '15 at 14:05

0

Maybe templates with ng-include are what you are looking for. Here is a Plunker example with your given data.

answered Nov 04 '15 at 14:05

AntiHeadshot

1,130
9
24

score 0 · Answer 4 · answered Feb 06 '20 at 17:38

You will need to use ng-repeat-start and ng-repeat-end.

ng-repeat-start is the same as ng-repeat however it allows us to output tags up to a ng-repeat-end which don't have to be child tags of the ng-repeat-start. You could then access the children outside of the ng-repeat-start tag if you like.

With your example you could do something like this...

            <tbody>
                <tr ng-repeat-start="parent in parents track by $index">
                    <td>Parent</td>
                    <td>{{parent.foo}}</td>
                </tr>
                <tr ng-repeat-end ng-repeat="child in parent.children track by $index">
                    <td>Child</td>
                    <td>{{child.foo}}</td>
                </tr>
            </tbody>

Angular ng-repeat over child objects

4 Answers4