Javascript 无法使用ng repeat在数组中循环

我正在使用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"
  }
]

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

  [
  {
    "_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"
  }
]

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

产品
{{product.randomId}

{{product.os.od}

{{product.otherProductAttributes.l}

{{proproduct.productStock.size}

{{proproduct.productStock.imagePath}

我试图访问上述数据字段，但html页面没有呈现任何内容。
我在控制台上打印了products数组，它正在打印整个数组。所以我的HTML页面有数据，但它没有按照我的要求进行渲染。

---

请帮忙

您需要使用嵌套的ng repeat从stockPath生成图像

 <div ng-repeat="images in product.productStock">
             <p>{{images.imagePaths}}</p>
 </div>

产品
{{product.randomId}

{{product.os.od}

{{product.otherProductAttributes.l}}

{{images.size}

{{images.imagePaths}

您需要使用嵌套的ng repeat从stockPath生成图像

 <div ng-repeat="images in product.productStock">
             <p>{{images.imagePaths}}</p>
 </div>

产品
{{product.randomId}

{{product.os.od}

{{product.otherProductAttributes.l}}

{{images.size}

{{images.imagePaths}

看起来不错，在循环的对象中有一个内部数组

productStock

，因此循环的方式永远不会起作用

假设控制器初始化中有一些内容-

$scope.products = [];    

Service.getData().then(function(response){      
       $scope.products = response;      
});

在html部分中，引入另一个ng repeat循环所有股票

<div ng-repeat="product in products">
   <p>{{product.randomId}}</p>
   <p>{{product.os.od}}</p>
   <p>{{product.otherProductAttributes.l}}</p>
    <div ng-repeat="pstock in product.productStock">          
        <p>{{pstock.size}} </p>
        <p>{{pstock.imagePaths}}</p>
   </div>
</div>

{{product.randomId}

{{product.os.od}

{{product.otherProductAttributes.l}

{{pstock.size}

{{pstock.imagePaths}

看起来不错，在循环的对象中有一个内部数组

productStock

，因此循环的方式永远不会起作用

假设控制器初始化中有一些内容-

$scope.products = [];    

Service.getData().then(function(response){      
       $scope.products = response;      
});

在html部分中，引入另一个ng repeat循环所有股票

<div ng-repeat="product in products">
   <p>{{product.randomId}}</p>
   <p>{{product.os.od}}</p>
   <p>{{product.otherProductAttributes.l}}</p>
    <div ng-repeat="pstock in product.productStock">          
        <p>{{pstock.size}} </p>
        <p>{{pstock.imagePaths}}</p>
   </div>
</div>

{{product.randomId}

{{product.os.od}

{{product.otherProductAttributes.l}

{{pstock.size}

{{pstock.imagePaths}

由于

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>

{{product.randomId}

{{product.os.od}

{{product.otherProductAttributes.l}

{{value.size}

由于

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>

{{product.randomId}

{{product.os.od}

{{product.otherProductAttributes.l}

{{value.size}

您的productStock是一个对象数组，您必须引用ng中的特定索引-repeat@Vivz：是的，如果尝试访问带有[subscript]的任何字段，则该值将在页面上呈现。但是如何遍历整个产品集合呢？。例如，如果我将执行{product[0].randomId}，那么它将在HTML页面上打印，但是在页面中没有任何内容打印，您必须再使用一个ng-repeat@Vivz：如何使用另一个ng repeat？您的productStock是一个对象数组，您必须引用ng中的特定索引-repeat@Vivz：是的，如果尝试访问带有[subscript]的任何字段，则该值将在页面上呈现。但是如何遍历整个产品集合呢？。例如，如果我将执行{product[0].randomId}，那么它将在HTML页面上打印，但是在页面中没有任何内容打印，您必须再使用一个ng-repeat@Vivz：如何使用另一个ng repeat？如果我这样写：product[0]。randomId，然后Id被打印在HTML上，这也是第一个索引。你检查了吗demo@Sajwwtharan：是的，您的演示按照要求运行，但当我尝试在代码中实现相同的逻辑时，它不起作用。您的数据在控制器中是否正确获取？getProducts方法中有什么内容如果我这样编写：product[0]。randomId，然后Id被打印在HTML上，这也是第一个索引。你检查了吗demo@Sajwwtharan：是的，您的演示按照要求运行，但当我尝试在代码中实现相同的逻辑时，它不起作用。您的数据在控制器中是否正确获取？getProducts方法中有什么内容？HTML页面上仍然没有呈现任何内容，不知道我做错了什么。你是否用JSON初始化了上述项目？是的，我正在将JSON传递到HTML页面。你是否正确使用第二个ng重复？发布getProducts的代码？这是我的getProducts方法

$scope.getProducts=function（）{$http.get（'/products/listProducts'）。然后（function（res）{console.log（res）；$scope.products=res；}）；

HTML页面上仍然没有呈现任何内容，不知道我做错了什么。您是否使用JSON初始化了上述项目？是的，我正在将JSON传递到HTML页面您是否正确使用第二个ng重复？发布getProducts的代码？这是我的getProducts方法

$scope.getProducts=function（）{$http.get（'/products/listProducts'）。然后（函数（res）{console.log（res）；$scope.products=res；}）；