使用ng-repeat如何从嵌套的JSON对象检索数据 [英] Using ng-repeat how to retrieve data from nested JSON object

问题描述

在这里，我想使用Angular ng-repeat从嵌套的JSON对象中检索子文档数组数据

Here , i wanna retrieve my subdocument array data from nested JSON object using Angular ng-repeat

这是我的JSON嵌套对象:

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"
            }
        ]
    }
]

角度控制器代码:

$http.get('/auth/booking-date/' + id).success(function(response){
            $scope.todaylist = response;
            console.log(response);
            $scope.today = '';
        });

在这里，我如何使用ng-repeat检索每个子文档数据.

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...

见上文，我发布了JSON数据而不是Link

See above i posted my JSON data instead of Link

推荐答案

我不确定，但是请检查是否可以解决您的问题:

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

这篇关于使用ng-repeat如何从嵌套的JSON对象检索数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！