I Have JSON like This.
var records = {
"grid": [{
"rows": [{
"id": 204,
"Status":1,
"firstName": "Harsh",
"lastName": "Borde",
"servername": "aa",
"orderNumber": 185,
"locationName": null,
"orderDetailItems": [{
"id": 506,
"itemsQty": 1,
"itemsShortName": "peg",
"pointOfServiceNum": 1,
"orderHeaderId": 1
}, {
"id": 507,
"itemsQty": 1.00000,
"itemsShortName": "pepsi",
"pointOfServiceNum": 1,
"orderHeaderId": 1
}, {
"id": 511,
"itemsQty": 1,
"itemsShortName": "Glenlevit",
"pointOfServiceNum": 1,
"orderHeaderId": 1
}]
}]
}]
};
I use for loop for iterate this data in 10 table per page.
var arr = [];
for(var i=0;i<10;i++)
{
arr.push(records);
}
$scope.records=arr;
for(var j=0;j<10;j++)
{
console.log(j);
console.log(arr[j].grid[0].rows[0].orderDetailItems[1].id);
}
my Html
What I have tried:
The HTML is like.
<div class="col-sm-6 col-md-4 col-lg-2">
<table class="table" cellspacing="0" cellpadding="0">
<tbody>
<tr class="loc" colspan="2">
<td style="text-align: center">{{ row.Location }}</td>
</tr>
<tr class="loc" colspan="2">
<td style="text-align: left; width: 50%">Order No.: {{ row.orderNumber }} </td>
<td style="text-align: right; width: 50%; padding-right: 21px"> Guest: {{ row.pointOfServiceNum }}</td>
</tr>
<tr class="loc" colspan="2">
<td style="text-align: left; width: 55%">Table No.: {{ row.locationName }}</td>
<td style="text-align: right; width: 45%; padding-right: 0px">Server: {{ row.serverName }}</td>
</tr>
<tr class="heading" style="float: initial"><th>Qty. Item Name</th></tr>
<tr class="rowRecord"><td style="width: 0%">{{ row.itemsQty }} </td><td style="width: 74%">{{ row.itemsShortName}}</td></tr>
</tbody>
<tfoot>
<tr>
<td>{{ row.firstName }} {{ row.lastName}}</td>
</tr>
</tfoot>
</table>
</div>
I am getting values in console but not in table.How is it possible to show data in table