Данные табулятора JSON Ajax API из URL - PullRequest
0 голосов
/ 24 октября 2018

Я пытаюсь настроить таблицу табулятора для отображения данных из этого URL-адреса JSON: https://records.nhl.com/site/api/franchise-skater-records?cayenneExp=franchiseId=33

Мой код указан ниже, я пытаюсь заставить его отображать имя и помощь для всехплееры в файле JSON, любая помощь с благодарностью!Спасибо

HTML

<link href="https://unpkg.com/tabulator- 
tables@4.0.5/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-        
tables@4.0.5/dist/js/tabulator.min.js"></script>

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

JS

//Build Tabulator
var table = new Tabulator("#example-table", { 
ajaxURL: ("https://records.nhl.com/site/api/franchise-skater-records?cayenneExp=franchiseId=29"),  
height:"100px",
layout:"fitColumns",
placeholder:"Placeholder Data",
index: "id",
columns:[
   {title:"Name", field:"firstName", sorter:"string"},
   {title:"Assists", field:"assists", sorter:"number"},

  ],
});

1 Ответ

0 голосов
/ 24 октября 2018

У вас проблемы, потому что ваши данные возвращаются в виде массива в свойстве data объекта, а не просто в виде массива.

Для обработки данных в этом формате вам нужно будет использовать ajaxResponse обратный вызов, чтобы сообщить Tabulator, где искать массив данных.поэтому ваш конструктор должен выглядеть так:

var table = new Tabulator("#example-table", { 
   ajaxURL: "https://records.nhl.com/site/api/franchise-skater-records?cayenneExp=franchiseId=29",  
   height:100,
   layout:"fitColumns",
   placeholder:"Placeholder Data",
   index: "id",
   columns:[
      {title:"Name", field:"firstName", sorter:"string"},
      {title:"Assists", field:"assists", sorter:"number"},
   ],
   ajaxResponse:function(url, params, response){
      //url - the URL of the request
      //params - the parameters passed with the request
      //response - the JSON object returned in the body of the response.

      return response.data; //pass the data array into Tabulator
   },
});
...