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!
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({
...
});
});