How to Iterate objects inside objects using ng-repeat

Question

I have a collection of objects that looks like this:

[{
  "mainObj": "main1",
  "subObjArray":{
                 "subObj": "sub1",
                 "deepSubObjArray":[{
                                     "deepSubObj": "deep1",
                                     "property": "something",
                                     },{
                                     "deepSubObj": "deep2",
                                     "property": "somethingElse"
                                   }]
               },
  },{
  "mainObj": "main2",
  "subObjArray":{
                 "subObj": "sub2",
                 "deepSubObjArray":[{
                                     "deepSubObj": "deep3",
                                     "property": "something",
                                     },{
                                     "deepSubObj": "deep4",
                                     "property": "somethingElse"
                                   }]
               },
}]

If I use:

<tr ng-repeat="mainObj in mainObjArray">
<td>{{mainObj}}</td>
<td>{{mainObj.subObjArray.deepSubObjArray}}</td>

I get the whole object string and the array of "deepSubObj" string as expected, but if i try:

<tr ng-repeat="mainObj in mainObjArray">
<div ng-repeat="deepSubObj in mainObj.subObjArray.deepSubObjArray">
<td>{{deepSubObj}}</td>
</div></tr>

I get nothing.

Is this not the correct way to iterate through that array? What else could be wrong?

Answer 1

When ng-repeat tags are nested, everything is straightforward.

The problem is related to layout and not to ng-repeat iteration. <div> tag is not allowed in tables outside of <td> tag, this will cause the table to be rendered incorrectly.

Using nested ngRepeat directives may be harmful for performance, depending on the objects. Preparing the data before its output is often a better solution.

Answer 2

html

<div ng-controller="MyCtrl">
    <ul>
        <li ng-repeat="mainObj in mainObjArray">
            {{mainObj.mainObj}}
            <ul>
                <li ng-repeat="deepSubObj in mainObj.subObjArray.deepSubObjArray">
                    {{deepSubObj.deepSubObj}}
                </li>
            </ul>
        </li>
    </ul>
</div>

js

angular.module('myApp', [])
        .controller('MyCtrl', function ($scope) {
            $scope.mainObjArray = [{
                "mainObj": "main1",
                "subObjArray": {
                    "subObj": "sub1",
                    "deepSubObjArray": [{
                        "deepSubObj": "deep1",
                        "property": "something",
                    }, {
                        "deepSubObj": "deep2",
                        "property": "somethingElse"
                    }]
                },
            }, {
                "mainObj": "main2",
                "subObjArray": {
                    "subObj": "sub2",
                    "deepSubObjArray": [{
                        "deepSubObj": "deep3",
                        "property": "something",
                    }, {
                        "deepSubObj": "deep4",
                        "property": "somethingElse"
                    }]
                },
            }]
        });

effect