Question

我有一个名为productImages的角度控制器，它返回以下JSON数据：

{
    "Product_1":[
        {   "image_id":"12469",
            "name":"My Product 1 - Variety 1",
            "url":"\/\/mystorefront.net\/120\/small\/1911791794.jpg"
        },
        {
            "image_id":"12470",
            "name":"My Product 1 - Variety 2",
            "url":"\/\/drfuittf5cya9.cloudfront.net\/121\/small\/1911802897.jpg"
        }
    ],
    "Product_2":[
        {   "image_id":"122349",
            "name":"My Product 2 - Variety 1",
            "url":"\/\/drfuittf5cya9.cloudfront.net\/122\/small\/1911791794.jpg"
        },
        {
            "image_id":"123470",
            "name":"191123897.jpg",
            "name":"My Product 2 - Variety 2",
            "url":"\/\/drfuittf5cya9.cloudfront.net\/123\/small\/1911802897.jpg"
        }
    ]
}

在我的角度代码中，我写道：

<div ng-controller="productImages"> 
  <div ng-repeat="product in products">
    {{product.image_id}}
  </div>
</div>

当我运行此时，ng-repeat div会重复两次，但product.image_id不会显示。如果我改为{{product}}或{{product.image_id}}，我会打印出整个JSON。

如何在angularJS中打印此JSON？另外，如何打印 Product_1 ， Product_2 ？

Answer 1

你的对象Product_1似乎是一个数组，而这个数组又有图像。

我认为您需要嵌套for循环来显示图像

Answer 2

您尝试重复对象的属性。根据{{3}}，您必须使用

<div ng-repeat="(key, value) in myObj"> ... </div>

你的对象的每个属性都是一个数组，所以我认为类似于：

 <div ng-repeat="(key, value) in myObj">
   <div ng-repeat= "product in value">
      {{product.image_id"}}
   </div>
 </div>

应该做的伎俩

Answer 3

为此使用两个循环：

＆＃13;

angular.module('app',[]).controller('mainCtrl', function($scope){
   $scope.products = {
    "Product_1":[
        {   "image_id":"12469",
            "name":"My Product 1 - Variety 1",
            "url":"\/\/mystorefront.net\/120\/small\/1911791794.jpg"
        },
        {
            "image_id":"12470",
            "name":"My Product 1 - Variety 2",
            "url":"\/\/drfuittf5cya9.cloudfront.net\/121\/small\/1911802897.jpg"
        }
    ],
    "Product_2":[
        {   "image_id":"122349",
            "name":"My Product 2 - Variety 1",
            "url":"\/\/drfuittf5cya9.cloudfront.net\/122\/small\/1911791794.jpg"
        },
        {
            "image_id":"123470",
            "name":"191123897.jpg",
            "name":"My Product 2 - Variety 2",
            "url":"\/\/drfuittf5cya9.cloudfront.net\/123\/small\/1911802897.jpg"
        }
    ]
} 
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app' ng-controller='mainCtrl'>
      <div ng-repeat="product in products">
          <div ng-repeat="item in product">
               {{item.image_id}}
          </div>
          <hr/>
     </div>
</div>

＆＃13;

Answer 4

您的JSON语法不正确。如果我理解正确，我们的每个产品都有几个品种。它应该如下：

{
    "Products": [
        {
            "Product": [
                {
                    "image_id": "12469",
                    "name": "My Product 1 - Variety 1",
                    "url": "//mystorefront.net/120/small/1911791794.jpg"
                },
                {
                    "image_id": "12470",
                    "name": "My Product 1 - Variety 2",
                    "url": "//drfuittf5cya9.cloudfront.net/121/small/1911802897.jpg"
                }
            ]
        },
        {
            "Product": [
                {
                    "image_id": "122349",
                    "name": "My Product 2 - Variety 1",
                    "url": "//drfuittf5cya9.cloudfront.net/122/small/1911791794.jpg"
                },
                {
                    "image_id": "123470",
                    "name": "My Product 2 - Variety 2",
                    "url": "//drfuittf5cya9.cloudfront.net/123/small/1911802897.jpg"
                }
            ]
        }
    ]
}

你的HTML应该是：

<div ng-controller= "Products"> 
  <div ng-repeat= "for oneproduct in Products">
    <div ng-repeat="for variety in oneproduct">
      {{variety.image_id"}}
    </div>
  </div>
</div>

虽然没有测试过......

Answer 5

您无法对对象productImages进行迭代，因为它不是数组。您可以迭代对象＆＃34; Product_1＆＃34;和＆＃34; Product_2＆＃34;。

如果你想迭代对象productImage，你必须把它写成一个数组。

在AngularJS中读取JSON响应

5 个答案: