Question

我是Angular.js的新手。在这里，我正在开发一个购物车，我必须显示产品的图像，名称和成本。我有多个租户，每个租户都有数组listOfBinaries，其中包含listOfMerchandise。 Myproblem是我必须显示租户的名字，listOfBinary的图片和listOfMerchandise的费用。我解析了JSON，如下所示，但在运行时我得到空页。谁能帮帮我吗。这是我在对REST URL进行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"
                    }
                ]
            }
        }
    ]
}

}

我的directives.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页面上显示产品详细信息。

先谢谢

Answer 1

你的标记全部搞砸了，检查我用你的数据和标记制作的插件

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>

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

1 个答案: