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

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 = '';