ng-repeat對json對象嵌套的json

我一直在這裏呆了幾天，我只能承認我對這件事缺乏認識。我有一個我從$ http請求收到的文章數組，並通過調用sortArticles（文章）迭代到以下結構中。原因是爲了簡化httpData對象的結構並擺脫一些嵌套數組（我已經刪除了一些可讀性的代碼）。ng-repeat對json對象嵌套的json

article.service.js：

function sortArticles(httpData){ 
    var sortedList = []; 
    for(var i = 0; i < httpData.length; i++){ 
     var date = new Date(httpData[i].Date); 
     var tmpObj = {Name: httpData[i].Name, 
         Price: httpData[i].Price, 
         Date: date}; 
     // I want my controller to receive a list with all articles 
     // linked to a specific date in the same array. Reason being; 
     // Each date will become a tab in the view: 
     if(typeof sortedList[date] == "undefined"){ 
      sortedList[date] = []; 
      sortedList[date][0] = tmpObj; 
     }else{ 
      sortedList[date][sortedList[date].length] = (tmpObj); 
     } 

    } 
    return sortedList; 
}

現在我控制器接受上述排序列表如下：

article.controller.js：

angular 
.module('app') 
.controller('ArticleController', ArticleController); 

ArticleController.$inject = ['articleservice']; 

function ArticleController(articleservice) { 

    var vm = this; 
    articleservice.getArticles() 
     .then(function(data){ 
      vm.sortedList = data; 
      for(var i in vm.sortedList){ 
       console.log("i: ", i, " ### vm.sortedList[i]: ", vm.sortedList[i] + "\n"); 
      } 
     }, 
     function(reason){ 
      console.log(reason); 
     }) 
     .catch(function(err){ 
      console.log(err); 
     }); 
}

在控制檯.log（）高於一切都在瀏覽器的控制檯中顯示，如下所示：

i：W ed Sep 02 2015 ### vm.articles [i]：[object Object]，[object Object] ....等 i：Wed Sep 03 2015 ### vm.articles [i]：[object Object]， [對象對象] ....等

這對我來說是一個陣列工作的證明。

但我該如何用ng-repeat呈現這個角？我只是得到了一個空白頁面的所有下面的嘗試：

<span ng-repeat="(key, value) in vm.sortedList">{{key}}</span> 


<span ng-repeat="(key, value) in vm.sortedList">{{value[key]}}</span> 

<div ng-repeat="(key, value) in vm.sortedList"> 
    <div ng-repeat="article in value[key]">{{article.Name}}</div></div>

半僞代碼的最終目標是這樣的

<md-tab ng-repeat="date in vm.sortedList" label: {{date}}> 
     <tabContent> 
      <p ng-repeat="article in date"> 
        <table> 
         <tr> 
          <th>Name</th> 
         </tr> 
         <tr>article.name</tr>

...等等等等

請幫我上網，你是我唯一的希望

來源

2015-09-23 Per Johansson

哪裏出了問題是什麼呢？安慰。請記錄數組以查看它是否爲所需的結構，如果在打印變量時添加了{{}}或ng-bind，則在得到正確結果後，「半僞」代碼部分將非常正確。 –

嗯，它只是不起作用。頁面是空白的。我試圖重新創建這個小提琴，我想並希望我沒有在這裏犯一個愚蠢的錯誤：http://jsfiddle.net/hhyz3yqh/1/ –

看看答案下面，你不能迭代通過以字符串作爲鍵的數組。用整數替換日期，你會注意到它的工作原理。建議創建一個對象，如{date：date，[obj1，obj2]}或類似的東西。 –

在JavaScript數組中，索引必須是整數。

以下：

vm.sortedList = []; 
var date = "May 2015"; 
vm.sortedList[date] = [];

將一個名爲May 2015屬性添加到sortedList，它不會推動任何東西放入數組。如果你記錄它，你可以看到sortedList的長度仍然是0。

所以下面：

<p ng-repeat="dates in vm.sortedList">

將遍歷一個空數組。

使用對象來代替：

vm.sortedList = {};

，並使用以下遍歷它：

ng-repeat="(key,value) in vm.sortedList"

演示：http://jsfiddle.net/Lka8qx4m/

來源

2015-09-23 18:22:51 tasseKATT

我們有，非常感謝！ –

不客氣:) – tasseKATT

ng-repeat對json對象嵌套的json

回答

相關問題