javascript - 如何在 ng-repeat 中正确显示此 json 文件？

Question

我正在尝试为我的网站创建商店页面。我想在 ng-repeat 中显示以下 json 文件:

{
  "cupcakes": {
      "Vanilla": [
          {"price":"9.99", "stock":"20", "amount":"8",
          "ingredients":"flour, sugar, vanilla extract",
          "popular":true}
      ],
      "Maple": [
          {"price":"9.99", "stock":"15", "amount":"8", 
          "ingredients":"flour, sugar, maple syrup",
          "popular":true}
      ]
  },
  "cookies": {
      "Vanilla": [
          {"price":"7.99", "stock":"50", "amount":"12", "ingredients":"flour, sugar, vanilla extract"}
      ],
      "Maple": [
          {"price":"7.99", "stock":"50", "amount":"12", "ingredients":"flour, sugar, maple syrup"}
      ]
  }
}

我想显示项目类型(纸杯蛋糕或 cookies )，然后是每个项目的类型( Vanilla 或枫糖)，然后是唯一属性，并能够过滤和搜索它们。我在想我可能必须重组我的 json 文件，但我不确定。我是否应该使用 forEach 在我的 Controller 中提前整理项目？这是我的 Controller :

angular.module('root', [])
.controller("index", ['$scope', '$http', function ($scope, $http) {
    $scope.name = null;
    $scope.email = null;
    $scope.comments = null;
    $scope.reason = null;
    $scope.employees = [];
    $scope.items = [];


    $http.get('http://localhost:8000/employees.json').then(function(result) {
        $scope.employees = result.data.records;
    });

    $http.get('http://localhost:8000/inventory.json').then(function(result) {
        $scope.items = result.data;
    });

    $scope.isEnabled = function() {
        if ($scope.name && $scope.email && $scope.comments) {
            return false;
        }
        else {
            return true;
        }
    }
}])

Answer 1

在 Javascript 中，几乎一切都是数组。您可以遍历对象数组，或者在一个对象中遍历其属性。

下面的脚本应该可以完成这项工作。

<div ng-repeat="(itemLabel, itemValue)in items">
     {{itemLabel}}
     <div ng-repeat="(flavorLabel, flavorValue)in itemValue">
         {{flavorLabel}}
         <div ng-repeat="object in flavorValue">
             <div ng-repeat="property in object">
                 {{property}}
             </div>
         </div>
     </div>
</div>

jsfiddle