angularjs – 使用ng-repeat如何从嵌套的JSON对象中检索数据

发布时间：2020-12-17 06:58:49 所属栏目：安全来源：网络整理

导读：在这里,我想使用Angular ng-repeat从嵌套的 JSON对象中检索我的子文档数组数据这是我的JSON嵌套对象： [ { _id: "5693bc169f5d75301ff5999d",booking: [ { can_name: "Kinley",can_quantity: "5",can_cost: "200",delivery_date: "12-01-2016",delivery_tim

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

这是我的JSON嵌套对象：

[
    {
        _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",can_quantity: "4",can_cost: "160",order_id: "14426",address: "154,Pilliayar koil street,_id: "569491fad6227ee408b9d04f",ordered_at: "2016-01-12T05:41:14.531Z",status: "UnderProcess"
            },{
            can_name: "Bisleri",can_cost: "250",order_id: "11391",_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来检索每个子文档数据.

这是我尝试过的,但我无法获得所有数据：

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

帮助将不胜感激……

见上文我发布了我的JSON数据而不是链接

解决方法

我不确定,但检查这是否解决了您的问题：

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

我只是在这里直接应用我的逻辑.试试这个：

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

此外,尝试删除此行,我想是因为此行将替换今天的当前内容,因此不会显示任何数据：

$scope.today = '';

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!