JSON into Tabulator table- Javascript

Question

I am trying to load a JSON from a URL into a Tabulator table. I have a jsfiddle here https://jsfiddle.net/liostse/2tdtyL6d/

var tableData = [];
$.getJSON('http://88.99.13.199:3000/regionsdata', function(mydata) {
  mydata.forEach(function(val) {
    var regdata = {};
    regdata.measure_code = val.measure_code;
    regdata.totalbent = val.totalbent;
    regdata.totalddent = val.totalddent;
    regdata.totaldd = val.totaldd;
    regdata.pctpliromes = val.pctpliromes;
    tableData.push(regdata);
  });
});
$("#mytable").tabulator({
  data: tableData,
  layout: "fitColumns",
  tooltipsHeader: false,
  columns: 
    [{title: "Measure",field: "measure_code",sorter: "string",frozen: true},
    {title: "totalbent",field: "totalbent"},
    {title: "totalddent",field: "totalddent"},
    {title: "totaldd",field: "totaldd"},
    {title: "pctpliromes",field: "pctpliromes"}],
});

Notice that, if I use hard-coded data, it works:

var tableData = [
   {measure_code:"Μ1",totalbent:"", totalddent:"", totaldd:"", pctpliromes:""},
   {measure_code:"Μ2",totalbent:"", totalddent:"", totaldd:"", pctpliromes:""},
   {measure_code:"Μ3",totalbent:"", totalddent:"", totaldd:"", pctpliromes:""},
   {measure_code:"Μ19",totalbent:"", totalddent:"", totaldd:"", pctpliromes:""},
   {measure_code:"Μ20",totalbent:"", totalddent:"", totaldd:"", pctpliromes:""},
   {measure_code:"Μ97",totalbent:"", totalddent:"", totaldd:"", pctpliromes:""},
   ];

Any help would be great!

ykouman · Accepted Answer · 2018-05-13 16:35:43Z

2

getJSON is asynchronous, so when you call .tabulator your data are not there yet. You have to place your call to .tabulator within the getJSON success function, i.e. something like:

$.getJSON('http://88.99.13.199:3000/regionsdata', function(mydata) {
  mydata.forEach(function(val) {
    ...
  });
  $("#mytable").tabulator({
    ...
  });
});

answered May 13, 2018 at 16:35

ykouman

362 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

lios Over a year ago

So obvious! It did not work in my jsfiddle but works fine in my code! Thank you @ykouman (Σε ευχαριστώ! Έχουμε συνεργαστεί στο παρελθόν).

ykouman Over a year ago

Σε θυμάμαι πολύ καλά Ηλία! Καλή συνέχεια!

fascynacja · Accepted Answer · 2023-12-29 16:07:46Z

0

There is no need to parse your data outside of Tabulator, you can call the setData function and pass your url straight into that. Tabulator will take care of the rest.

$("#mytable").tabulator("setData", "http://88.99.13.199:3000/regionsdata");

edited Dec 29, 2023 at 16:07

fascynacja

3,1865 gold badges32 silver badges58 bronze badges

answered Sep 24, 2018 at 20:50

Oli Folkerd

8,4281 gold badge27 silver badges58 bronze badges

Collectives™ on Stack Overflow

JSON into Tabulator table- Javascript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related