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

我正在尝试为我的网站创建一个商店页面。我想显示以ng重复以下JSON文件：如何在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"} 
 
     ] 
 
    } 
 
}

我想显示的类型的项目（蛋糕或饼干），那么每个项目（香草或枫木）的类型，那么独特的属性并能够过滤和搜索它们。我想我可能不得不重构我的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; 
     } 
    } 
}])

来源

2016-11-25 doct03

在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

来源

2016-11-25 17:33:28

第二个想法是，如果我想向json文件添加更多数据，这不起作用。我认为这与ng-repeat标签有关。有什么建议么？ – doct03

没关系我通过删除第4个不重复来解决问题。 – doct03

下面是使用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>

当然，如果foods是你在你的答案贴在JSON它只会工作。

这是一个工作jsFiddle。

欲了解更多有关ng-repeat的信息，请参阅here。

来源

2016-11-25 17:27:14

-1

你可以通过转换JSON通过

JSON.parse(json);

以后你到对象可以访问任何按键做在JavaScript的JSON的键东西，这将是一个对象/ HashMap的循环或排序

你的情况

所以，你的API结果可以解析像

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

以后，你可以做NG-重复在你看来有些东西一样

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

来源

2016-11-25 17:27:31

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

来源

2016-11-25 17:42:26

通过你们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>

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

来源

2016-11-25 17:50:47

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

回答

相关问题