ノックアウトhtmlテーブルへのForeachバインディングが機能しない

Question

私はしばらくこの問題を解決してきました。私はノックアウトに新しいです。

ノックアウトを使って表示したいテーブルがあるhtmlページがあります。私がJSON配列をハードコードするなら、それは動作します！ $ .getJSON関数を使用すると機能しません。

ちょっとした背景：このプロジェクトにはサーバー側の言語を使用できません。サーバーサイドのものを許可しないCMSが使用されています。

ダウンロードしたデータの表からJSONを取得し、これを渡して表示、スタイリングなどを自動化して、すべてのユーザーがHTMLテーブルを使用してファイルをアップロードするようにします。世話をする。

もっと簡単な方法がある場合は、私は間違いなく提案します。私の質問は、どのように私はforeachデータの表示を行うのですか？ここで

は、いくつかのテストデータと私のバイオリンです： https://jsfiddle.net/xtw3nf8q/

HTML

<table>  
<tbody data-bind="foreach: teststuff">  
<tr> 
     <td data-bind="text: $data.testone"></td>    
     <td data-bind="text: $data.testtwo"></td> 
     <td data-bind="text: $data.testthree"></td> 
     <td data-bind="text: $data.testfour"></td> 
     <td data-bind="text: $data.testfive"></td> 
     <td data-bind="text: $data.testsix"></td> 
     <td data-bind="text: $data.testseven"></td> 
    </tr> 
</tbody> 

jQueryの/ノックアウト

$.getJSON("/echo/json/jsonfile.txt", function(data) { 
ko.applyBindings({ 
teststuff: data 
}); 
}); 

ここ

はjsonfile.txt内容です：

[{"testone":"Number","testtwo":"49","testthree":"49","testfour":"49","testfive":"49","testsix":"49","testseven":""},{"testone":"Reporting","testtwo":"0","testthree":"0","testfour":"0","testfive":"0","testsix":"0","testseven":"0.0 %"},{"testone":"Area","testtwo":"0","testthree":"0","testfour":"0","testfive":"0","testsix":"0","testseven":""},{"testone":"K. BACA","testtwo":"0","testthree":"0","testfour":"0","testfive":"0","testsix":"0","testseven":"N/A"},{"testone":"D. GRAY","testtwo":"0","testthree":"0","testfour":"0","testfive":"0","testsix":"0","testseven":"N/A"},{"testone":"J. ISA","testtwo":"0","testthree":"0","testfour":"0","testfive":"0","testsix":"0","testseven":"N/A"},{"testone":"Number","testtwo":"49","testthree":"49","testfour":"49","testfive":"49","testsix":"49","testseven":""},{"testone":"Reporting","testtwo":"0","testthree":"0","testfour":"0","testfive":"0","testsix":"0","testseven":"0.0 %"},{"testone":"Area","testtwo":"0","testthree":"0","testfour":"0","testfive":"0","testsix":"0","testseven":""},{"testone":"T. BARK","testtwo":"0","testthree":"0","testfour":"0","testfive":"0","testsix":"0","testseven":"N/A"},{"testone":"H. LAND","testtwo":"0","testthree":"0","testfour":"0","testfive":"0","testsix":"0","testseven":"N/A"},{"testone":"F. JONES","testtwo":"0","testthree":"0","testfour":"0","testfive":"0","testsix":"0","testseven":"N/A"},{"testone":"D. KNOWLES","testtwo":"0","testthree":"0","testfour":"0","testfive":"0","testsix":"0","testseven":"N/A"}] 

私はデバッグを支援するためにChromeのKnockoutJSプラグイン/拡張機能をダウンロードし、それがここまで私を得ました。開発者コンソールにエラーはありません。私はconsole.logの "data"を表示すると、自分のデータを表示します。私は迷っている！

Answer 1

あなたはテキストをサーバーに求めました。 （文字列データを使用して）

$.getJSON("/echo/json/jsonfile.txt", function(data) { 
    ko.applyBindings({ 
     teststuff: JSON.parse(data) 
    }); 
}); 

ライブ例：https://jsfiddle.net/xtw3nf8q/4/