我正在使用 Angular 来使用 Nodejs Web 服务。
但我无法循环访问数据。
Json 数据:
[
{
"_id": "595fbe940eaeda0b387568fc",
"randomId": "0001",
"sName": "xyz abc",
"des": "A wide variety of xyz abc",
"__v": 0,
"os": {
"od": "2017-07-06T18:30:00.000Z",
"ok": "2017-07-06T18:30:00.000Z",
"dp": 10
},
"otherProductAttributes": {
"l": "23",
"mt": "fabricType"
},
"productStock": [
{
"size": 28,
"color": "Red",
"quantity": "120",
"inStock": "true",
"price": 234.56,
"_id": "595fbe940eaeda0b387568ff",
"imagePaths": [
"https://image.jpg",
"https://image.jpg",
"https://image.jpg"
]
},
{
"size": 28,
"color": "Black",
"quantity": "10",
"inStock": "true",
"price": 89,
"_id": "595fbe940eaeda0b387568fe",
"imagePaths": [
"https://image.jpg"
]
},
{
"size": 30,
"color": "Red",
"quantity": "999",
"inStock": "true",
"price": 999.99,
"_id": "595fbe940eaeda0b387568fd",
"imagePaths": [
"https://image.jpg"
]
}
],
"uploadDate": "2017-07-06T18:30:00.000Z"
},
{
"_id": "595fc0b60eaeda0b38756900",
"randomId": "0002",
"sName": "xyz abc",
"des": "A wide variety of xyz abc",
"__v": 0,
"os": {
"od": "2017-07-06T18:30:00.000Z",
"ok": "2017-07-06T18:30:00.000Z",
"dp": 10
},
"otherProductAttributes": {
"l": "23",
"mt": "fabricType"
},
"productStock": [
{
"size": 38,
"color": "Red",
"quantity": "120",
"inStock": "true",
"price": 234.56,
"_id": "595fc0b60eaeda0b38756903",
"imagePaths": [
"https://image.jpg",
"https://image.jpg",
"https://image.jpg"
]
},
{
"size": 26,
"color": "Black",
"quantity": "10",
"inStock": "true",
"price": 89,
"_id": "595fc0b60eaeda0b38756902",
"imagePaths": [
"https://image.jpg"
]
},
{
"size": 30,
"color": "Red",
"quantity": "999",
"inStock": "true",
"price": 999.99,
"_id": "595fc0b60eaeda0b38756901",
"imagePaths": [
"https://image.jpg"
]
}
],
"uploadDate": "2017-07-06T18:30:00.000Z"
}
]
HTML 页面
<div class="panel panel-default" ng-init="getProducts()">
<!-- Default panel contents -->
<div class="panel-heading">Products</div>
<div class="panel-body">
<div class="row">
<div ng-repeat="product in products">
<p>{{product.randomId}}</p>
<p>{{product.os.od}}</p>
<p>{{product.otherProductAttributes.l}}</p>
<p>{{prooduct.productStock.size}} </p>
<p>{{prooduct.productStock.imagePaths}}</p>
</div>
</div>
</div>
</div>
我正在尝试访问上述数据字段,但 html 页面没有呈现任何内容。
我在控制台上打印了产品数组,它正在打印整个数组。所以我的 HTML 页面有数据,但它没有根据我的要求呈现。
请帮忙。
最佳答案
由于 productStock
是一个对象数组,因此您必须再使用一次 ng-repeat
<div class="row">
<div ng-repeat="product in products">
<p>{{product.randomId}}</p>
<p>{{product.os.od}}</p>
<p>{{product.otherProductAttributes.l}}</p>
<div ng-repeat="value in product.productStock">
<p>{{value.size}} </p>
<div ng-repeat="image in value.imagePaths">
<img ng-src="{{image}}">
</div>
</div>
</div>
</div>
关于javascript - 无法使用 ng-repeat 循环遍历数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44986180/