JSON array Tabulator js table

Question

I have a Tabulator datatable in my HTML file. Looks like this:

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

I have a JavaScript file that would populate my table with data by calling a rest API that returns with a JSON.

This is how my JS file looks like:

$(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);

});

And the JSON which the REST service returns with looks like this:

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

The Tabulator table apears but without any data. If I check my JS log, I can see the request is done wihout any error, and i can see the JSON in my response.

Can you help me how can I do it?

Thank you!

Possible duplicate of [How to return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-asynchronous-call) — str, Nov 21 '17 at 18:46
sorry, but i think my question is not about how asynchronous calls works. — solarenqu, Nov 21 '17 at 18:50

Lucas · Accepted Answer · 2018-03-06T20:12:15.237

3

There are three major errors in your code.

First, your JSON response, the response should be as the tabulator js documentation shows:

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

Second, the columns field should match each row:

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

Third, getJSON is asynchronous, so you need to get and set the data only when the response arrives:

$.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.

edited Mar 06 '18 at 20:12

answered Nov 21 '17 at 19:08

Lucas

1,259
15
25

Thank you so much! I have o modified my server side REST response too, but your soluion solved my probleme! Thank you! – solarenqu Nov 21 '17 at 19:25
@solarenqu no problem – Lucas Nov 21 '17 at 19:28
only one more question, what do you think is it possible to load the table line by line? :) – solarenqu Nov 21 '17 at 21:18
@solarenqu like one by one with a delay? – Lucas Nov 23 '17 at 11:22
Yes, with delay.. :) – solarenqu Nov 23 '17 at 11:22
@solarenqu yes it's possible, you can use jQuery for that btw, but I'm not a specialist in animation, there are infinite ways to do that, one of them is run through your response data using [promises](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Promise) and [timeout](https://www.w3schools.com/jsref/met_win_settimeout.asp) for delay. – Lucas Nov 23 '17 at 12:09
1

@Lucas, you can pass the URL directly to the setData function and it will make the ajax request for you – Oli Folkerd Feb 25 '18 at 22:32

JSON array Tabulator js table

1 Answers1