Using ng-repeat how to retrieve data from nested JSON object - angularjs

Question

Here , i wanna retrieve my subdocument array data from nested JSON object using Angular ng-repeat
this is my JSON nested object:
[
{
_id: "5693bc169f5d75301ff5999d",
booking:
[
{
can_name: "Kinley",
can_quantity: "5",
can_cost: "200",
delivery_date: "12-01-2016",
delivery_timeslot: "3pm-8pm",
order_id: "18214",
address: "140,Bajanai koil street, Melmanagar,Poonamallee,Chennai",
_id: "5694926fd6227ee408b9d051",
ordered_at: "2016-01-12T05:43:11.076Z",
status: "UnderProcess"
}
]
},
{
_id: "5693baf07fe08c6012034b13",
booking:
[
{
can_name: "Kinley",
can_quantity: "4",
can_cost: "160",
delivery_date: "12-01-2016",
delivery_timeslot: "3pm-8pm",
order_id: "14426",
address: "154,Pilliayar koil street,Poonamallee,Chennai",
_id: "569491fad6227ee408b9d04f",
ordered_at: "2016-01-12T05:41:14.531Z",
status: "UnderProcess"
},
{
can_name: "Bisleri",
can_quantity: "5",
can_cost: "250",
delivery_date: "12-01-2016",
delivery_timeslot: "3pm-8pm",
order_id: "11391",
address: "154,Pilliayar koil street,Poonamallee,Chennai",
_id: "5694923ad6227ee408b9d050",
ordered_at: "2016-01-12T05:42:18.900Z",
status: "UnderProcess"
}
]
}
]
Angular Controller Code:
$http.get('/auth/booking-date/' + id).success(function(response){
$scope.todaylist = response;
console.log(response);
$scope.today = '';
});
Here, how can i use ng-repeat to retrieve every subdocument data.
this is what am tried, but am not able get every data:
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>ID</th>
<th>Address</th>
<th>Can Name</th>
<th>Can Quantity</th>
<th>Can Cost</th>
<th>Timeslot</th>
<th>Delivery Date</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="today in todaylist">
<td>{{today._id}}</td>
<td>{{today.booking[0].address}}</td>
<td>{{today.booking[0].can_name}}</td>
<td>{{today.booking[0].can_quantity}}</td>
<td>{{today.booking[0].can_cost}}</td>
<td>{{today.booking[0].delivery_timeslot}}</td>
<td>{{today.booking[0].delivery_date | date:'dd-MM-yyyy'}}</td>
</tr>
</tbody>
</table>
</div>
Help will be appreciated...
See above i posted my JSON data instead of Link

Answer 1

I am not sure but check if this solves your problem:
<tr ng-repeat="today in todaylist">
<div ng-repeat="bookingObj in today.booking">
<td>{{today._id}}</td>
<td>{{bookingObj.address}}</td>
<td>{{bookingObj.can_name}}</td>
<td>{{bookingObj.can_quantity}}</td>
<td>{{bookingObj.can_cost}}</td>
<td>{{bookingObj.delivery_timeslot}}</td>
<td>{{bookingObj.delivery_date | date:'dd-MM-yyyy'}}</td>
</div>
</tr>
I am just applying my logic directly here. Try this:
<tbody ng-repeat="today in todaylist">
<tr ng-repeat="bookingObj in today.booking">
<td>{{today._id}}</td>
<td>{{bookingObj.address}}</td>
<td>{{bookingObj.can_name}}</td>
<td>{{bookingObj.can_quantity}}</td>
<td>{{bookingObj.can_cost}}</td>
<td>{{bookingObj.delivery_timeslot}}</td>
<td>{{bookingObj.delivery_date | date:'dd-MM-yyyy'}}</td>
</tr>
</tbody>
Also, try removing this line, I guess it because this line will replace current content of today, and hence no data will be displayed:
$scope.today = '';

Answer 2

Just use the below code
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>ID</th>
<th>Address</th>
<th>Can Name</th>
<th>Can Quantity</th>
<th>Can Cost</th>
<th>Timeslot</th>
<th>Delivery Date</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="today in todaylist">
<div ng-repeat="booking in today.booking">
<td>{{today._id}}</td>
<td>{{booking.address}}</td>
<td>{{booking.can_name}}</td>
<td>{{booking.can_quantity}}</td>
<td>{{booking.can_cost}}</td>
<td>{{booking.delivery_timeslot}}</td>
<td>{{booking.delivery_date | date:'dd-MM-yyyy'}}</td>
</div>
</tr>
</tbody>
</table>
</div>

Answer 3

It looks like your objects are stored in the booking array. To iterate through this array and add a new row on your DOM for each item in your array, I'd suggest the following:
<tbody>
<tr ng-repeat="booking in todaylist.booking">
<td>{{ today._id }}</td>
<td>{{ booking.address }}</td>
<td>{{ booking.can_name }}</td>
<td>{{ booking.can_quantity }}</td>
<td>{{ booking.can_cost }}</td>
<td>{{ booking.delivery_timeslot }}</td>
<td>{{ booking.delivery_date | date:'dd-MM-yyyy' }}</td>
</tr>
</tbody>
For the sake of clarity, you may want to change the variable name of your array from booking to bookings. I find it less confusing to keep the variable names of collections as plural nouns. This makes it easier to easily identify what to expect in your collection.
With that change, you'd have:
<tbody>
<tr ng-repeat="booking in todaylist.bookings">
<td>{{ today._id }}</td>
<td>{{ booking.address }}</td>
<td>{{ booking.can_name }}</td>
<td>{{ booking.can_quantity }}</td>
<td>{{ booking.can_cost }}</td>
<td>{{ booking.delivery_timeslot }}</td>
<td>{{ booking.delivery_date | date:'dd-MM-yyyy' }}</td>
</tr>
</tbody>