JSON 数组制表符 js table

Question

我的 HTML 文件中有一个 Tabulator 数据 table。看起来像这样：

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

我有一个 JavaScript 文件，它可以通过调用 returns 和 JSON 的休息 API 用数据填充我的 table。

这是我的 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 服务 returns 的 JSON 如下所示：

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

制表符 table 出现但没有任何数据。如果我检查我的 JS 日志，我可以看到请求已完成，没有任何错误，并且我可以在我的响应中看到 JSON。

你能帮我看看我该怎么做吗？

谢谢！

Answer 1

您的代码中存在三个主要错误。

首先，你的JSON响应，响应应该如tabulator 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
    }, ],
});

第三个,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: arrays don't have the append method, you can use unshift or pushto prepend or append data to the array.

JSON 数组制表符 js table

JSON array Tabulator js table

javascript

jquery

json

tabulator