JSON配列Tabulator jsテーブル

Question

HTMLファイルにTabulatorデータテーブルがあります。次のようになります。

<div class="example-table">/div> 

私はJSONを返し、残りAPIを呼び出すことによって、データと私のテーブルを埋めるだろうJavaScriptファイルを持っています。

$(document).ready(function() { 

    $(".example-table").tabulator({ 
     columns : [ { 
      title : "ID", 
      field : "myjson.firstname", 
      width : 250 
     }, { 
      title : "Pred", 
      field : "myjson.pred", 
      sorter : "number", 
      align : "left", 
      formatter : "progress", 
      width : 200 
     }, ], 
    }); 

    var tabledata = []; 

    $.getJSON('http://127.0.0.1:7001/MySerices/service/rest', function(json) { 
     tabledata.append(json); 
    }); 

    $(".example-table").tabulator("setData", tabledata); 

}); 

そして、このようなルックスを持つRESTサービスリターンがJSON：

{"myjson": 
[{"firstname":"Piter","pred":"0,616540492"}, 
{"firstname":"Piter","pred":"0,616540492"} 
]} 

タブレータテーブルは、任意のデータなしではなくapears私JSファイルがどのように見えるか

はこれがあります。私のJSログをチェックすると、リクエストが何らかのエラーで実行されているのがわかります。私の応答でJSONが見えます。

どうすればいいですか？

ありがとうございました！

Answer 1

コードに3つの重大なエラーがあります。

まず、あなたのJSON応答は、応答がタブJS documentation示すようにすべきである：

//An array of objects not wrapped in an object 
[ 
    {"firstname":"Piter","pred":"0,616540492"}, 
    {"firstname":"Parker","pred":"0,42325456"} 
] 

第、列フィールドには、各列に一致する必要があり：

$(".example-table").tabulator({ 
    columns : [ { 
     title : "ID", 
     field : "firstname",//changed here 
     width : 250 
    }, { 
     title : "Pred", 
     field : "pred",//and here 
     sorter : "number", 
     align : "left", 
     formatter : "progress", 
     width : 200 
    }, ], 
}); 

第3の、getJSONは非同期なので、データを取得して設定する必要があります。 responseが到着：

$.getJSON('http://127.0.0.1:7001/MySerices/service/rest', function(response) { 
    //response is already a parsed JSON 
    $(".example-table").tabulator("setData", response); 

}); 

PS：配列がappendメソッドを持っていない、あなたはunshiftまたはpushが先頭に追加またはarrayにデータを追加するために使用することができます。