Nested ng-repeat

Question

I have a 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, to myData variable

  { "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" } } 

A day can have any number of tasks, tasks can be nested and contain any number of other tasks.

Now using this code

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

I can list the days that work. I would expect with the 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 the days and top-level jobs for this day, but that will not work. (To list nested Jobs will be the next task, and not ask about it now).

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

PS: using angular 1.2.0-rc.3

Answer 1

It is better to have the correct JSON format instead of directly using 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 simplify and simplify the work.

Now you can write a loop like -

 <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> 

Answer 2

If you have a large nested JSON object and use it on multiple screens, you may run into performance issues when loading the page. I always use small individual JSON objects and request related objects as lazy loading only where they are needed.

you can achieve this 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 below

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

Although the factory API 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' } }); }); 

Answer 3

Create a dummy tag that will not appear on the page, but it will work as a holder for ng-repeat:

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