遍历 Angular JS Controller 中的复杂 JSON 数组并显示特定值答案

【问题标题】：Iterate through complex JSON array in Angular JS Controller and display specific values遍历 Angular JS Controller 中的复杂 JSON 数组并显示特定值
【发布时间】：2017-04-20 17:13:20
【问题描述】：

{
   "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 的新手，希望得到一些关于如何准确地迭代以完成我的任务的指针的帮助。

【问题讨论】：

标签： javascript angularjs json

【解决方案1】：

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

对产品和项目使用.map 函数，我能够输出预期的结果（通过在最后展平结果）。

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：