正在读取AngularJS中的JSON响应

Reading JSON Response in AngularJS

本文关键字：JSON 响应 中的 AngularJS 读取      更新时间：2023-09-26

我有一个名为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、Producti_2？

您的对象Product_1似乎是一个数组，而该数组又具有图像。

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

您尝试重复对象的属性。根据这里的文档，您必须使用

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

应该完成

使用两个循环作为：

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"
        }
    ]
} 
})
<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>

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

不过还没有测试。。。

不能对对象productImages进行迭代，因为它不是数组。您可以迭代对象"Product_1"answers"Product_2"。

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

相关文章：