CODEWITHSUNDEEP
tabulator
opp3919
opp3919

Reputation: 21

Tabulator JSON Ajax API data from URL

I'm trying to configure a tabulator table to display data from this JSON url: https://records.nhl.com/site/api/franchise-skater-records?cayenneExp=franchiseId=33

My code is below, I'm trying to get it to display the first name and assists for all players in the JSON file, any help is greatly appreciated! Thanks

HTML

<link href="https://unpkg.com/tabulator- 
[email protected]/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-        
[email protected]/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"},

  ],
});

Upvotes: 2

Views: 5155

Answers (1)

Oli Folkerd
Oli Folkerd

Reputation: 8348

You are having issues because your data is being returned as an array in the data property of an object rather than simply as an array.

To handle data in that format you will need to use the ajaxResponse callback to tell Tabulator where to look for the data array. so your constructor should look like this:

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
   },
});

Upvotes: 3

Related Questions