javascript - 无法使用 ng-repeat 循环遍历数组

标签 javascript angularjs

我正在使用 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/

相关文章:

javascript - 如何通过串联在 View 中构造 AngularJS 状态参数?

javascript - 在 Javascript 中的二维数组的数组中添加元素

node.js - Angular $HTTP 可与 CORS 和 application/x-www-form-urlencoded 配合使用,但使用 application/json 时会出现 OPTIONS 404

javascript - 如何在 jQuery 中定位不是具有特定类的容器子级的容器?

javascript - d3.js 数据第一次未绑定(bind)

angularjs - 在服务中返回已解析的 $resource

javascript - angular.translate 与 $scope.$emit

javascript - 访问 AngularJS 中的全局 javascript 变量

javascript - ES5 与 ES6 promise

java - 是否可以在javascript中反序列化java对象