Question

我正在尝试配置一个制表器表以显示来自此JSON URL的数据： 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"},

  ],
});

Answer 1

您遇到了问题，因为您的数据将以对象的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
   },
});

URL的制表器JSON Ajax API数据

1 个答案: