ng-repeat on ng-table in angularjs. Multiple Dynamic Tables - json

Question

Want to repeat an ng-table and ng rows both from a nested table. How to repeat the table from a nested json. for example json may be :
{
"service_info":{
"service_name":"heading1",
"sl_id":3,
"stack":1
},
"instance_info":[
{
"instance_id":1,
"possible_actions":{
"actions":[
{
"action_name":"modify",
"action_id":2
},
{
"action_name":"deprovision",
"action_id":3
}
]
}
},
{
"instance_id":2,
"possible_actions":{
"actions":[
{
"action_name":"modify",
"action_id":2
},
{
"action_name":"deprovision",
"action_id":3
}
]
}
}
]
},
{
"service_info":{
"service_name":"heading2",
"sl_id":3,
"stack":1
},
"instance_info":[
{
"instance_id":1,
"possible_actions":{
"actions":[
{
"action_name":"modify",
"action_id":2
},
{
"action_name":"deprovision",
"action_id":3
}
]
}
},
{
"instance_id":2,
"possible_actions":{
"actions":[
{
"action_name":"modify",
"action_id":2
},
{
"action_name":"deprovision",
"action_id":3
}
]
}
}
]
}
need service info as the table heading and instance info as a table row in ng-table. if I use tableparams in it no data is displayed.

Answer 1

After using the trick suggested by #GrumbleSnatch I could get the desired result and here it goes.
$scope.ilist={
"service_info":{
"service_name":"heading1",
"sl_id":3,
"stack":1
},
"instance_info":[
{
"instance_id":1,
"possible_actions":{
"actions":[
{
"action_name":"modify",
"action_id":2
},
{
"action_name":"deprovision",
"action_id":3
}
]
}
},
{
"instance_id":2,
"possible_actions":{
"actions":[
{
"action_name":"modify",
"action_id":2
},
{
"action_name":"deprovision",
"action_id":3
}
]
}
}
]
},
{
"service_info":{
"service_name":"heading2",
"sl_id":3,
"stack":1
},
"instance_info":[
{
"instance_id":1,
"possible_actions":{
"actions":[
{
"action_name":"modify",
"action_id":2
},
{
"action_name":"deprovision",
"action_id":3
}
]
}
},
{
"instance_id":2,
"possible_actions":{
"actions":[
{
"action_name":"modify",
"action_id":2
},
{
"action_name":"deprovision",
"action_id":3
}
]
}
}
]
};
$scope.tabledata=[];
for (var i=0;i< $scope.ilist.length;i++){
$scope.tabledata[i]={};
var datat=$scope.ilist[i];
$scope.tabledata[i].tableParams = new ngTableParams({
page: 1,
count: 10
}, {
total: datat.instance_info.length,
getData: function($defer, params) {
$scope.displayingItems=datat.instance_info.slice((params.page() - 1) * params.count(), params.page() * params.count()).length;
$defer.resolve(datat.instance_info.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});
}
and Html goes like this:
<div ng-repeat="instanceList in ilist track by $index">
<h3>{{instanceList.service_info.service_name}}</h3>
<table class="table table-striped table-bordered text-left alignment" class="table" ng-table="tabledata[$index].tableParams" style="margin-top: 20px;">
<tr ng-repeat="instance in $data">
<td data-title="'Instance Name'">
<a style="cursor: pointer; color: #000000; text-decoration: none;">
{{instanceList.service_info.service_name}}_{{instance.instance_id}}
</a>
</td>
</tr>
</table>
</div>