Nested ng-repeat
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
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>
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' }
});
});