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

I'm trying to create a Store page for my website. I want to display the following json file in ng-repeat:

我正在尝试为我的网站创建一个商店页面。我想在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"}
      ]
  }
}

I want to display the type item (cupcake or cookie) then the type of each item (vanilla or maple) then the unique attributes and be able to filter and search through them. I'm thinking I may have to restructure my json file, but I'm not sure. Should I sort out the items ahead of time in my controller with a forEach? Here is my controller:

我想显示类型项(蛋糕或饼干),然后显示每个项目的类型(香草或枫木),然后显示独特的属性,并能够过滤和搜索它们。我想我可能要重构我的json文件,但我不确定。我应该使用forEach在我的控制器中提前整理项目吗?这是我的控制器:

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

5 个解决方案

#1

In Javascript, almost everything is an array. You can iterate over an array of objects or, in an object you are iterating over his properties.

在Javascript中,几乎所有东西都是数组。您可以迭代一个对象数组,或者在一个对象中迭代它的属性。

The following script should do the work.

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

<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

#2

Here is a way for showing your data using ng-repeat:

以下是使用ng-repeat显示数据的方法:

 <div ng-repeat="(foodKey, foodVal) in foods">
     <b>{{foodKey}}</b>
      <div ng-repeat="(typesKey, typesVal) in foodVal">
          <span>{{typesKey}}</span>
          <ul ng-repeat="types in typesVal">
              <li ng-repeat="(key, val) in types">
                  {{key}} : {{val}}
              </li>
         </ul>
    </div>
</div>

Of course it will only work if foods is the json you posted in your answer.

当然只有食物是你在答案中张贴的json才会有用。

Here is a working jsFiddle.

这是一个有效的jsFiddle。

For more information on ng-repeat see here.

有关ng-repeat的更多信息,请参见此处。

#3

Just going through your JSON.

刚刚浏览你的JSON。

<div ng-repeat="(key, value) in inventory">{{key}}
<ul>
  <li ng-repeat="(material_key, material_value) in value">{{material_key}}
    <ul>
      <li ng-repeat="(options_key, options_value) in material_value[0]">{{options_key}} - {{options_value}}</li>
    </ul>
  </li>
</ul>
<br>

Have a look at this plunker. I hope this will solve you problem.

看看这个plunker。我希望这能解决你的问题。

#4

you need multiple ng-repeaters hope this plunker is your requirement

你需要多个ng-repeaters希望这个plunker是你的要求

#5

-1

you can do anything with the keys of your JSON in javascript , by converting the JSON to object by

您可以通过将JSON转换为对象,在javascript中对JSON的键执行任何操作

JSON.parse(json);

later on you can access any key and that will be an object/hashmap to loop or sort

稍后你可以访问任何键,这将是一个循环或排序的对象/ hashmap

So in your case, your API result can be parsed like

因此,在您的情况下,您的API结果可以解析为

var resultData = JSON.parse(result.data);

Later you can do ng-repeat in your view some thing like

稍后你可以在你的视图中做一些重复的事情

[{id: 'foo'}, {id: 'bar'}] | orderBy:'id'

#1