Nested ng-repeat

Question

I have some dummy XML file:

<Week number="2013-W45">
    <Day dow="1" templateDay="Monday">
        <Job name="wake up" >
            <Job name="get dressed" >
                <Job name="prepare breakfast" >
                    <Job name="eat breakfast" > </Job>
                </Job>
            </Job>
        </Job>
        <Job name="work 9-5" >
        </Job>
    </Day>
    <Day dow="2" templateDay="Tuesday"   >
        <Job name="wake up" >
            <Job name="get dressed" >
                <Job name="prepare breakfast" >
                    <Job name="eat breakfast" > </Job>
                </Job>
            </Job>
        </Job>
        <Job name="work 9-5" >
        </Job>
        <Job name="football" >
        </Job>
    </Day>
    <Day dow="3"   templateDay="Wednesday" >
        <Job name="wake up" >
            <Job name="get dressed" >
                <Job name="prepare breakfast" >
                    <Job name="eat breakfast" > </Job>
                </Job>
            </Job>
        </Job>
        <Job name="work 9-5" >
        </Job>
    </Day>
    <Day dow="4"  templateDay="Thursday"  >
        <Job name="wake up" >
            <Job name="get dressed" >
                <Job name="prepare breakfast" >
                    <Job name="eat breakfast" > </Job>
                </Job>
            </Job>
        </Job>
        <Job name="work 9-5" >
        </Job>
        <Job name="football" >
        </Job>
    </Day>
    <Day dow="5" templateDay="Friday" >
        <Job name="go to pub" >
        </Job>
    </Day>
    <Day dow="6" templateDay="Saturday"  >
        <Job name="work 9-5" >
        </Job>
    </Day>
    <Day dow="7" templateDay="Sunday" >
        <!-- nothing to do on sunday -->
    </Day>
</Week>

Using this library http://code.google.com/p/x2js/ I convert it to json, into variable myData

 {
    "Week" : {
        "Day" : [{
                "Job" : [{
                        "Job" : {
                            "Job" : {
                                "Job" : {
                                    "_name" : "eat breakfast"
                                },
                                "_name" : "prepare breakfast"
                            },
                            "_name" : "get dressed"
                        },
                        "_name" : "wake up"
                    }, {
                        "_name" : "work 9-5"
                    }
                ],
                "_dow" : "1",
                "_templateDay" : "Monday"
            }, {
                "Job" : [{
                        "Job" : {
                            "Job" : {
                                "Job" : {
                                    "_name" : "eat breakfast"
                                },
                                "_name" : "prepare breakfast"
                            },
                            "_name" : "get dressed"
                        },
                        "_name" : "wake up"
                    }, {
                        "_name" : "work 9-5"
                    }, {
                        "_name" : "football"
                    }
                ],
                "_dow" : "2",
                "_templateDay" : "Tuesday"
            }, {
                "Job" : [{
                        "Job" : {
                            "Job" : {
                                "Job" : {
                                    "_name" : "eat breakfast"
                                },
                                "_name" : "prepare breakfast"
                            },
                            "_name" : "get dressed"
                        },
                        "_name" : "wake up"
                    }, {
                        "_name" : "work 9-5"
                    }
                ],
                "_dow" : "3",
                "_templateDay" : "Wednesday"
            }, {
                "Job" : [{
                        "Job" : {
                            "Job" : {
                                "Job" : {
                                    "_name" : "eat breakfast"
                                },
                                "_name" : "prepare breakfast"
                            },
                            "_name" : "get dressed"
                        },
                        "_name" : "wake up"
                    }, {
                        "_name" : "work 9-5"
                    }, {
                        "_name" : "football"
                    }
                ],
                "_dow" : "4",
                "_templateDay" : "Thursday"
            }, {
                "Job" : {
                    "_name" : "go to pub"
                },
                "_dow" : "5",
                "_templateDay" : "Friday"
            }, {
                "Job" : {
                    "_name" : "work 9-5"
                },
                "_dow" : "6",
                "_templateDay" : "Saturday"
            }, {
                "_dow" : "7",
                "_templateDay" : "Sunday"
            }
        ],
        "_number" : "2013-W45"
    }
}

Day can have any number of Jobs, Jobs can be nested and contain any number of other Jobs.

Now using this code

<p ng-repeat="day in myData.Week.Day">
   {{day._dow}} - {{day._templateDay}}
</p>

I can list the days, that works. I would expect that with following code

<p ng-repeat="day in myData.Week.Day">
    {{day._dow}} - {{day._templateDay}}

    <span ng-repeat="job in day.Job">
        {{job._name}}
    <span/>
</p>

I can list days and top level Jobs for that day, but it doesn't work. (To list the nested Jobs would be next task, not asking about that now).

So, how to list at least the top-level Jobs? Also in the json format, I see some Jobs are Objects and some are Arrays. How to handle both situations?

PS.: using angular 1.2.0-rc.3

Prasad K - Google · Accepted Answer · 2016-03-03T10:03:48.680

105

It's better to have a proper JSON format instead of directly using the one converted from XML.

[
  {
    "number": "2013-W45",
    "days": [
      {
        "dow": "1",
        "templateDay": "Monday",
        "jobs": [
          {
            "name": "Wakeup",
            "jobs": [
              {
                "name": "prepare breakfast",

              }
            ]
          },
          {
            "name": "work 9-5",

          }
        ]
      },
      {
        "dow": "2",
        "templateDay": "Tuesday",
        "jobs": [
          {
            "name": "Wakeup",
            "jobs": [
              {
                "name": "prepare breakfast",

              }
            ]
          }
        ]
      }
    ]
  }
]

This will make things much easier and easy to loop through.

Now you can write the loop as -

<div ng-repeat="week in myData">
   <div ng-repeat="day in week.days">
      {{day.dow}} - {{day.templateDay}}
      <b>Jobs:</b><br/> 
       <ul>
         <li ng-repeat="job in day.jobs"> 
           {{job.name}} 
         </li>
       </ul>
   </div>
</div>

edited Mar 03 '16 at 10:03

answered Nov 07 '13 at 15:45

Prasad K - Google

2,584
1
16
18

1

ok, let suppose I can convert to json you posted, how would I now loop through days and their (top-level) jobs? – przno Nov 07 '13 at 16:19
Sorry, but I'm still not able to output anything from the nested `ng-repeat`. Example: http://jsfiddle.net/83XFS/ – przno Nov 08 '13 at 09:27
12

Replacing p tags with div tags worked.
tags can not contain block elements it seems. Updated fiddle at : http://jsfiddle.net/83XFS/2/
– Prasad K - Google Nov 08 '13 at 09:55
Unbelievable, I was looking for error in my angular/js code, didn't think of that kind of stupid error. Thanks a lot! – przno Nov 08 '13 at 12:24
@Prasad I see your answer I face almost same type of problem Please Help. [link](http://stackoverflow.com/questions/39248702/fetch-multi-levelnested-json-data-and-show-data-in-ionic-app) – Neotrixs Sep 01 '16 at 08:40

score 7 · Answer 2 · answered Feb 15 '16 at 02:58

If you have a big nested JSON object and using it across several screens, you might face performance issues in page loading. I always go for small individual JSON objects and query the related objects as lazy load only where they are required.

you can achieve it using ng-init

<td class="lectureClass" ng-repeat="s in sessions" ng-init='presenters=getPresenters(s.id)'>
      {{s.name}}
      <div class="presenterClass" ng-repeat="p in presenters">
          {{p.name}}
      </div>
</td>

The code on the controller side should look like below

$scope.getPresenters = function(id) {
    return SessionPresenters.get({id: id});
};

While the API factory is as follows:

angular.module('tryme3App').factory('SessionPresenters', function ($resource, DateUtils) {

        return $resource('api/session.Presenters/:id', {}, {
            'query': { method: 'GET', isArray: true},
            'get': {
                method: 'GET', isArray: true
            },
            'update': { method:'PUT' }
        });
    });

score 1 · Answer 3 · answered Apr 13 '16 at 17:37

1

Create a dummy tag that is not going to rendered on the page but it will work as holder for ng-repeat:

<dummyTag ng-repeat="featureItem in item.features">{{featureItem.feature}}</br> </dummyTag>

answered Apr 13 '16 at 17:37

Homero

11
1

Nested ng-repeat

3 Answers3

Linked