使用Angular.js解析JSON中的嵌套对象数组

Parsing the nested array of objects in JSON using Angular.js

本文关键字：嵌套 对象 数组 JSON Angular js 解析 使用      更新时间：2023-09-26

我是Angular.js的新手。在这里我正在开发一个购物车，在那里我必须显示产品的图像、名称和成本。我有多个租户，每个租户都有一个数组listOfBinaries，其中包含listOfMerchance。我的问题是，我必须显示租户的名称，来自listOfBinary的图像和来自listOfMerchance的成本。我解析了如下所示的JSON，但在运行时我得到了空页面。有谁能帮我吗。这是我在对RESTURL:进行AJAX调用后得到的JSON

{
"_links": {
    "search": {
        "href": "http://localhost:8080/sportsrest/tenants/search"
    }
},
"_embedded": {
    "tenants": [
        {
            "name": "tenant1",
            "domainName": "gaming.com",
            "description": "sasasa",
            "listOfBinary": [
                {
                    "imageURL": "http://i.telegraph.co.uk/multimedia/archive/02602/premier-league_2602603b.jpg",
                    "username": "Sumanth",
                    "description": "imagSky Sports offer free live Premier League action on o Sky Sports offer free live Premier League action on opening weekend of season as battle witpening weekend of season as battle wite1",
                    "listOfMerchandise": [
                        {
                            "rate": 100,
                            "type": "item1",
                            "shortDescription": "test1"
                        }
                    ]
                },
                {
                    "imageURL": "http://images.clipartpanda.com/sports-equipment-clipart-black-and-white-soccer-ball-hi.png",
                    "username": "as",
                    "description": "Sky Sports offer free live Premier League action on opening weekend of season as battle wit Sky Sports offer free live Premier League action on opening weekend of season as battle wit",
                    "listOfMerchandise": [
                        {
                            "rate": 200,
                            "type": "item2",
                            "shortDescription": "test2"
                        }
                    ]
                }
            ],
            "merchandise": null,
            "_links": {
                "self": {
                    "href": "http://localhost:8080/sportsrest/tenants/2"
                },
                "listOfCustomerPackage": {
                    "href": "http://localhost:8080/sportsrest/tenants/2/listOfCustomerPackage"
                }
            }
        },
        {
            "name": "tenant2",
            "domainName": "cric.io",
            "listOfBinary": [
                {
                    "imageURL": "http://i.telegraph.co.uk/multimedia/archive/02602/premier-league_2602603b.jpg",
                    "username": "Sumanth",
                    "description": "Sky Sports offer free live Premier League action on opening weekend of season as battle wit Sky Sports offer free live Premier League action on opening weekend of season as battle wit",
                    "listOfMerchandise": [
                        {
                            "rate": 500,
                            "type": "item5",
                            "shortDescription": "test5"
                        }
                    ]
                },
                {
                    "imageURL": "www.test.com",
                    "username": "sumanth",
                    "description": "sample",
                    "listOfMerchandise": [
                        {
                            "rate": 2323,
                            "type": "type7",
                            "shortDescription": "test"
                        }
                    ]
                }
            ],
            "merchandise": null,
            "_links": {
                "self": {
                    "href": "http://localhost:8080/sportsrest/tenants/9"
                },
                "listOfCustomerPackage": {
                    "href": "http://localhost:8080/sportsrest/tenants/9/listOfCustomerPackage"
                }
            }
        },
        {
            "name": "tenant5",
            "domainName": "test.co",
            "description": "test 123 ",
            "listOfBinary": [],
            "binary": {
                "fileLocation": "www.test.com",
                "username": "sumanth",
                "description": "sample",
                "listOfMerchandise": [
                    {
                        "rate": 2323,
                        "type": "trt",
                        "shortDescription": "rtrtrt"
                    }
                ]
            }
        }
    ]
}

}

我的directive.js文件：当我调用这个Ajax 时，我已经超过了JSON

 myAppDirectives.
  controller('items_display', function ($scope,$http) {
 $http({ method: 'GET', url: 'http://localhost:8080/sportsrest/tenants/' }).success(function (data) {
 $scope.carts=data; 
 }).
 error(function (data) {
     alert("error" + data);
     console.log(data);
 });
 });

我的HTML页面：

<!DOCTYPE html>
 < html ng-app="myApp">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
   </head>
   <body>
    <div ng-app="myApp" >
    <div  ng-controller="items_display">
    <div  ng-repeat="item in carts._embedded.tenants">
    <div type="text" class="item_name" value={{item.name}}  > 
    <div  ng-repeat="item in carts._embedded.tenants.listOfBinary">
     <img  class="shop_img" ng-src="{{item.fileLocation}}"  ng-style="{'width':'100px', 'height':'100px'}" /> 
     <div  ng-repeat="item in carts._embedded.tenants.listOfBinary.listOfMerchandise">
      <div type="text" class="item_cost" value={{item.rate}}  > 
    </div>  
      </br>
     </div>
    </div>
    </div>
</body>

有人可以帮助使用Angular.js.在html页面上显示产品详细信息吗

提前感谢

您的标记都搞砸了，请检查我用您的数据和标记创建的plunker

http://plnkr.co/edit/jGCm6nO9S4hlNxLCyrSy?p=preview

<body>
  <div ng-app="myApp">
    <div ng-controller="items_display">
      <div ng-repeat="tenant in carts._embedded.tenants">
        <div type="text" class="item_name">{{tenant.name}}
          <div ng-repeat="binary in tenant.listOfBinary">
            <img class="shop_img" ng-src="{{binary.fileLocation}}" ng-style="{'width':'100px', 'height':'100px'}" />
            <div ng-repeat="(key, value) in binary.listOfMerchandise[0]">
              <div type="text" class="item_cost">{{key}}: {{value}}
              </div>
              <br>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
相关文章：