多次元ノックアウトjs observableArrayをバインドする

Question

私はJSONデータを持っています。私はそれをko.observableArrayに変換しました。私の意図は、それを私のビューに結びつけることです。

次のようにJSONは次のとおりです。

{ "1" : { "asr" : "15:50", "fajr" : "03:00", "isha" : "21:31", "maghrib" : "19:02", "zuhr" : "12:21" }, 
     "2" : { "asr" : "15:51", "fajr" : "02:55", "isha" : "21:35", "maghrib" : "19:04", "zuhr" : "12:21" }, 
     "3" : { "asr" : "15:53", "fajr" : "02:51", "isha" : "21:39", "maghrib" : "19:07", "zuhr" : "12:21" }, 
     "4" : { "asr" : "15:54", "fajr" : "02:46", "isha" : "21:42", "maghrib" : "19:09", "zuhr" : "12:20" } 
    } 

これはobservableArrayにJSONに変換するJavaScriptです：

self.prayerData(jQuery.parseJSON(data)); 
    $.each(self.prayerData(), function (days) { 
      // It works and displays the data 
      console.log(days + " - " + this.fajr + " | " + this.asr); 
     }); 

これは、私がデータをバインドするために行わものですが、そのは動作していない：

ノックアウトでこの種のデータをバインドするのに役立ちます。あなたがやりたいだろう

Answer 1

2つのこと：

1 - あなたはバインディングがobservableArrayの値が実際の配列であると仮定して、実際の配列にあなたのオブジェクトをマップする必要があります。つまり、空の配列を作成し、オブジェクトの各プロパティをループして配列にプッシュする必要があるでしょう。次に、アイテムのプロパティとしてインデックスを追加できます。何かのように：

var mappedToArray = []; 
$.each(data, function(index, item) { 
    mappedToArray.push(item); 
    item.index = index; 
}); 

2 - 一部のブラウザではtrタグの間に置かれたコメントについての厄介なことができます。ここ

<table> 
    <tr> 
     <th>index</th> 
     <th>fajr</th> 
     <th>zuhr</th> 
     <th>asr</th> 
     <th>maghrib</th> 
     <th>isha</th> 
    </tr> 
    <tbody data-bind="foreach: prayerData"> 
     <tr> 
      <td data-bind="text: index"></td> <!-- Display the current row --> 
      <td data-bind="text: fajr"></td> 
      <td data-bind="text: zuhr"></td> 
      <td data-bind="text: asr"></td> 
      <td data-bind="text: maghrib"></td> 
      <td data-bind="text: isha"></td> 
     </tr> 
    </tbody> 
</table> 

サンプル：安全のために、あなたはあなたのforeachがtbodyタグのように結合置きたいと思うでしょうhttp://jsfiddle.net/rniemeyer/utdAm/