Question

在这里，我想使用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",
        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来检索每个子文档数据。

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

<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数据而不是链接

Answer 1

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

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

Answer 2

只需使用以下代码

即可

<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

看起来您的对象存储在booking数组中。要遍历此数组并在DOM中为数组中的每个项添加一个新行，我建议如下：

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

为清楚起见，您可能希望将数组的变量名称从booking更改为bookings。我发现将集合的变量名称保留为复数名词不那么令人困惑。这样可以更轻松地轻松识别您的收藏中的内容。

有了这个改变，你就有了：

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

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

3 个答案: