2015-09-23 372 views
1

我一直在這裏呆了幾天,我只能承認我對這件事缺乏認識。 我有一個我從$ 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> 

...等等等等

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

+0

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

+0

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

+0

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

回答

1

在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/

+0

我們有,非常感謝! –

+0

不客氣:) – tasseKATT