Question

{
   "products":[
      {
         "recommendation":{
            "currentLevel":79,
            "maxLevel":100
         },
         "items":[
            {
               "id":"10600",
               "title":"Hampton Cookset - 8 Piece",
               "category":"STAINLESS STEEL",
               "imageUrl": "http://localhost/img/001.jpg",
               "unitsInCartons": 10,
               "unitCost":4.52,
               "packSize":10,
               "secondaryCategory":"Chairs"
            }
         ]
      },
      {
         "recommendation":{  
            "currentLevel":79,
            "maxLevel":100
         },
         "items":[  
            {  
               "id":"10870",
               "title":"MELAMINE BOWL",
               "category":"BOWLS",
               "imageUrl":"http://localhost/img/001.jpg",
               "unitsInCartons":6,
               "unitCost":0.93,
               "packSize":5,
               "secondaryCategory":"Kids Home"
            },
            {  
               "id":"10820",
               "title":"PP YUM YUM CUP",
               "category":"CUPS/MUGS",
               "imageUrl":"http://localhost/img/002.jpg",
               "unitsInCartons":12,
               "unitCost":0.7,
               "packSize":25,
               "secondaryCategory":"Kids Home"
            }
         ]
      }
   ]
}

我正在尝试迭代上面的JSON代码，我的目标是显示所有title，category，unitsInCarton，unitCost和packSize Angular JS中表格形式的视图中的值。

我是Angular的新手，并希望得到关于如何完成迭代以完成任务的指针的帮助。

Answer 1

您可以使用Angular嵌套ng-repeat，但这对性能不利。我建议首先解析数据以获得预期的格式，然后只使用一个ng-repeat。

对产品和物品使用.map功能，我能够输出预期结果（通过在结尾处展平结果）。

＆＃13;

var data = {
   "products":[
      {
         "recommendation":{
            "currentLevel":79,
            "maxLevel":100
         },
         "items":[
            {
               "id":"10600",
               "title":"Hampton Cookset - 8 Piece",
               "category":"STAINLESS STEEL",
               "imageUrl": "http://localhost/img/001.jpg",
               "unitsInCartons": 10,
               "unitCost":4.52,
               "packSize":10,
               "secondaryCategory":"Chairs"
            }
         ]
      },
      {
         "recommendation":{  
            "currentLevel":79,
            "maxLevel":100
         },
         "items":[  
            {  
               "id":"10870",
               "title":"MELAMINE BOWL",
               "category":"BOWLS",
               "imageUrl":"http://localhost/img/001.jpg",
               "unitsInCartons":6,
               "unitCost":0.93,
               "packSize":5,
               "secondaryCategory":"Kids Home"
            },
            {  
               "id":"10820",
               "title":"PP YUM YUM CUP",
               "category":"CUPS/MUGS",
               "imageUrl":"http://localhost/img/002.jpg",
               "unitsInCartons":12,
               "unitCost":0.7,
               "packSize":25,
               "secondaryCategory":"Kids Home"
            }
         ]
      }
   ]
};

var items = data.products.map(function (product) {
  return product.items.map(function (item) {
   return {
      title: item.title,
      category: item.category,
      unitsInCarton: item.unitsInCarton,
      unitCost: item.unitCost,
      packSize: item.packSize,
    };
  });
});

items = [].concat.apply([], items);

console.log(items);

＆＃13;

Answer 2

直接使用ng-repeat

angular.module("app", [])
  .controller("ctrl", function($scope) {

    $scope.arr = {"products":[{"recommendation":{"currentLevel":79,"maxLevel":100},"items":[{"id":"10600","title":"Hampton Cookset - 8 Piece","category":"STAINLESS STEEL","imageUrl":"http://localhost/img/001.jpg","unitsInCartons":10,"unitCost":4.52,"packSize":10,"secondaryCategory":"Chairs"}]},{"recommendation":{"currentLevel":79,"maxLevel":100},"items":[{"id":"10870","title":"MELAMINE BOWL","category":"BOWLS","imageUrl":"http://localhost/img/001.jpg","unitsInCartons":6,"unitCost":0.93,"packSize":5,"secondaryCategory":"Kids Home"},{"id":"10820","title":"PP YUM YUM CUP","category":"CUPS/MUGS","imageUrl":"http://localhost/img/002.jpg","unitsInCartons":12,"unitCost":0.7,"packSize":25,"secondaryCategory":"Kids Home"}]}]}

  })

table {
  border-collapse: collapse;
}

table,
th,
td {
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <table>
    <thead>
      <th>title</th>
      <th>category</th>
      <th>units in carton</th>
      <th>unit cost</th>
      <th>pack size</th>
    </thead>
    <tbody ng-repeat="product in arr.products">
      <tr ng-repeat="item in product.items">
        <td>{{item.title}}</td>
        <td>{{item.category}}</td>
        <td>{{item.unitsInCartons}}</td>
        <td>{{item.unitCost}}</td>
        <td>{{item.packSize}}</td>
      </tr>
    </tbody>
  </table>

</div>

Answer 3

您可以使用ng-repeat在html中显示数据

<table >
  <tr ng-repeat="product in arr.products">
     <td>
      <table>
        <tr ng-repeat="item in product.items">
          <td>{{item.title}}</td>
          <td>{{item.category}}</td>
          <td>{{item.unitsInCarton}}</td>
          <td> {{item.unitCost}}</td>
          <td> {{item.packSize}}</td>
        </tr>
      </table>
     </td>
  </tr>
</table>

angular.module("app",[])
.controller("ctrl",function($scope){

$scope.arr = {
   "products":[
      {
         "recommendation":{
            "currentLevel":79,
            "maxLevel":100
         },
         "items":[
            {
               "id":"10600",
               "title":"Hampton Cookset - 8 Piece",
               "category":"STAINLESS STEEL",
               "imageUrl": "http://localhost/img/001.jpg",
               "unitsInCartons": 10,
               "unitCost":4.52,
               "packSize":10,
               "secondaryCategory":"Chairs"
            }
         ]
      },
      {
         "recommendation":{  
            "currentLevel":79,
            "maxLevel":100
         },
         "items":[  
            {  
               "id":"10870",
               "title":"MELAMINE BOWL",
               "category":"BOWLS",
               "imageUrl":"http://localhost/img/001.jpg",
               "unitsInCartons":6,
               "unitCost":0.93,
               "packSize":5,
               "secondaryCategory":"Kids Home"
            },
            {  
               "id":"10820",
               "title":"PP YUM YUM CUP",
               "category":"CUPS/MUGS",
               "imageUrl":"http://localhost/img/002.jpg",
               "unitsInCartons":12,
               "unitCost":0.7,
               "packSize":25,
               "secondaryCategory":"Kids Home"
            }
         ]
      }
   ]
}
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<table >
  <tr ng-repeat="product in arr.products">
     <td>
      <table>
        <tr ng-repeat="item in product.items">
          <td>{{item.title}}</td>
          <td>{{item.category}}</td>
          <td>{{item.unitsInCarton}}</td>
          <td> {{item.unitCost}}</td>
          <td> {{item.packSize}}</td>
        </tr>
      </table>
     </td>
  </tr>
</table>
  
</div>

迭代Angular JS Controller中的复杂JSON数组并显示特定值

3 个答案: