如何在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文件？

回答

相關問題