JSON в таблицу табуляторов - Javascript

Я пытаюсь загрузить JSON из URL в таблицу табулятора. У меня есть jsfiddle здесь 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"}],
});

Обратите внимание, что если я использую жестко закодированные данные, это работает:

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:""},
   ];

Любая помощь будет отличной!

2 ответа

Решение

getJSON асинхронный, поэтому, когда вы вызываете.tabulator, ваши данные еще не там. Вы должны поместить свой вызов.tabulator в функцию успеха getJSON, то есть что-то вроде:

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

Нет необходимости анализировать ваши данные за пределами Tabulator, вы можете вызвать функцию setData и передать свой URL прямо туда. Табулятор позаботится обо всем остальном.

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

Другие вопросы по тегам