JSON數組制表器js表

Question

我的HTML文件中有一個Tabulator數據表。 看起來像這樣：

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

我有一個JavaScript文件，該文件將通過調用返回JSON的rest API來用數據填充表。

這是我的JS文件的樣子：

$(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"}
]}

制表器表將顯示，但沒有任何數據。 如果檢查我的JS日志，則可以看到請求完成而沒有任何錯誤，並且可以在響應中看到JSON。

您能幫我怎么做？

謝謝！

Answer 1

您的代碼中存在三個主要錯誤。

首先 ，您的JSON響應，該響應應如制表js 文檔所示：

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

其次 ，columns字段應與每一行匹配：

$(".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
    }, ],
});

第三 ， 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 。