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

我是Angular.js的新手。在这里，我正在开发一个购物车，我必须显示图像，名称和产品的成本。我有多个租户，每个租户都有包含listOfMerchandise的二进制数组列表。我的问题是，我必须显示租户的姓名、Biary列表中的图像以及Merchandise列表中的成本。我解析了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"
                    }
                ]
            }
        }
    ]
}

}

My directions.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页面上显示产品详细信息

---

提前感谢

您的标记乱七八糟，请检查我用您的数据和标记制作的插件

{{tenant.name}
{{key}}:{{value}

您有任何控制台错误吗？@maurycy感谢重播。没有控制台错误。@maurycy是我在HTML页面中编写的用于解析JSON的代码是否正确？很抱歉延迟。谢谢。你救了我一天。

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