我正在尝试将应该是搜索结果的JSON数据插入到我的Tabulator中，然后它应该在各自的列中显示搜索结果。这是我的代码：
<body>
<div id="example-table"></div>
<script>
var table = new Tabulator("#example-table", {
ajaxURL:"http://hadrians-search.tk/search",
ajaxParams:{search_param:"ball", items_per_page:"2", page_number:"2"},
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.Object; //return the d property of a response json object
},
columns:
[{title:"Title", field:"shippingCost.title"},
{title:"Price", field:"price"},
{title:"Shipping Cost", field:"shippingCost.shippingServiceCost.value"},
{title:"Shipping Type", field:"shippingCost.shippingServiceCost.shippingType"},
],
});
</script>
</body>
我在浏览器的控制台选项卡中收到这个：
Data Loading Error - Unable to process data due to invalid data type
Expecting: array
Received: undefined
Data: undefined tabulator.min.js:2:29478
n.prototype._setDataActual
https://unpkg.com/tabulator-tables@4.1.2/dist/js/tabulator.min.js:2:29478
n.prototype.setData/<
https://unpkg.com/tabulator-tables@4.1.2/dist/js/tabulator.min.js:2:28800
n.prototype.setData
https://unpkg.com/tabulator-tables@4.1.2/dist/js/tabulator.min.js:2:28624
f.prototype._loadDataStandard/</<
https://unpkg.com/tabulator-tables@4.1.2/dist/js/tabulator.min.js:5:7539
这是我发送给制表器的JSON响应：
{
"0": {
"country": "US",
"itemId": "323440622675",
"price": "11.02",
"shippingCost": {
"expeditedShipping": "false",
"handlingTime": "3",
"oneDayShippingAvailable": "false",
"shipToLocations": "Worldwide",
"shippingServiceCost": {
"_currencyId": "USD",
"value": "0.0"
},
"shippingType": "Free"
},
"title": "Magnetic Pearl Ball Curtain Tiebacks Tie Backs Holdbacks Buckle Clips Accessory",
"user_args": {
"advanced": null,
"pages": {
"entries_per_page": 10,
"page_number": 10
},
"search_terms": "ball"
}
},
"1": {
"country": "CN",
"itemId": "332746804737",
"price": "2.49",
"shippingCost": {
"expeditedShipping": "false",
"handlingTime": "1",
"oneDayShippingAvailable": "false",
"shipToLocations": "Worldwide",
"shippingServiceCost": {
"_currencyId": "USD",
"value": "0.0"
},
"shippingType": "Free"
},
"title": "Natural Amethyst Quartz Stone Sphere Crystal Fluorite Ball Healing Gemstone",
"user_args": {
"advanced": null,
"pages": {
"entries_per_page": 10,
"page_number": 10
},
"search_terms": "ball"
}
},
"2": {
"country": "US",
"itemId": "322315462251",
"price": "5.49",
"shippingCost": {
"expeditedShipping": "true",
"handlingTime": "1",
"oneDayShippingAvailable": "false",
"shipToLocations": "Worldwide",
"shippingServiceCost": {
"_currencyId": "USD",
"value": "4.89"
},
"shippingType": "Flat"
},
"title": "Richardson Trucker Ball Cap Meshback Hat Snapback Cap Trucker Hat Cap - 112",
"user_args": {
"advanced": null,
"pages": {
"entries_per_page": 10,
"page_number": 10
},
"search_terms": "ball"
}
},
"3": {
"country": "US",
"itemId": "183411812494",
"price": "22.99",
"shippingCost": {
"expeditedShipping": "true",
"handlingTime": "0",
"oneDayShippingAvailable": "false",
"shipToLocations": "Worldwide",
"shippingServiceCost": {
"_currencyId": "USD",
"value": "0.0"
},
"shippingType": "Free"
},
"title": "Seismic Sports Slam Ball 10 - 30 lb Slam Ball for Crossfit, HIIT, Plyometrics",
"user_args": {
"advanced": null,
"pages": {
"entries_per_page": 10,
"page_number": 10
},
"search_terms": "ball"
}
},
"4": {
"country": "US",
"itemId": "113179929571",
"price": "20.89",
"shippingCost": {
"expeditedShipping": "true",
"handlingTime": "1",
"oneDayShippingAvailable": "true",
"shipToLocations": "Worldwide",
"shippingServiceCost": {
"_currencyId": "USD",
"value": "0.0"
},
"shippingType": "Free"
},
"title": "3 In 1 Kids Baby Play Tent Ball Pit Pool House Crawl Tunnel Indoor Outdoor Game",
"user_args": {
"advanced": null,
"pages": {
"entries_per_page": 10,
"page_number": 10
},
"search_terms": "ball"
}
},
"5": {
"country": "US",
"itemId": "153249589978",
"price": "10.34",
"shippingCost": {
"expeditedShipping": "true",
"handlingTime": "1",
"oneDayShippingAvailable": "false",
"shipToLocations": "Worldwide",
"shippingServiceCost": {
"_currencyId": "USD",
"value": "0.0"
},
"shippingType": "Free"
},
"title": "Premium Official Size 5 USA Soccer Ball W/ Pump Assorted Graphics!",
"user_args": {
"advanced": null,
"pages": {
"entries_per_page": 10,
"page_number": 10
},
"search_terms": "ball"
}
},
"6": {
"country": "US",
"itemId": "153168623537",
"price": "58.99",
"shippingCost": {
"expeditedShipping": "true",
"handlingTime": "1",
"oneDayShippingAvailable": "false",
"shipToLocations": "Worldwide",
"shippingServiceCost": {
"_currencyId": "USD",
"value": "0.0"
},
"shippingType": "Free"
},
"title": "Dragon Ball The Complete Series Seasons 1-5 - 1,2,3,4,5 New",
"user_args": {
"advanced": null,
"pages": {
"entries_per_page": 10,
"page_number": 10
},
"search_terms": "ball"
}
},
"7": {
"country": "US",
"itemId": "110874290750",
"price": "9.41",
"shippingCost": {
"expeditedShipping": "true",
"handlingTime": "1",
"oneDayShippingAvailable": "true",
"shipToLocations": "Worldwide",
"shippingServiceCost": {
"_currencyId": "USD",
"value": "0.0"
},
"shippingType": "FlatDomesticCalculatedInternational"
},
"title": "5006 Flexfit Sweep Low Profile Fitted Baseball Blank Plain Hat Ball Cap Flex Fit",
"user_args": {
"advanced": null,
"pages": {
"entries_per_page": 10,
"page_number": 10
},
"search_terms": "ball"
}
},
"8": {
"country": "US",
"itemId": "332908229449",
"price": "39.99",
"shippingCost": {
"expeditedShipping": "true",
"handlingTime": "2",
"oneDayShippingAvailable": "false",
"shipToLocations": "Worldwide",
"shippingServiceCost": {
"_currencyId": "USD",
"value": "0.0"
},
"shippingType": "Free"
},
"title": "ADIDAS BRAZUCA OFFICIAL MATCH BALL AUTHENTIC WORLD CUP 2014",
"user_args": {
"advanced": null,
"pages": {
"entries_per_page": 10,
"page_number": 10
},
"search_terms": "ball"
}
},
"9": {
"country": "US",
"itemId": "282781534125",
"price": "13.99",
"shippingCost": {
"expeditedShipping": "true",
"handlingTime": "1",
"oneDayShippingAvailable": "false",
"shipToLocations": "Worldwide",
"shippingServiceCost": {
"_currencyId": "USD",
"value": "0.0"
},
"shippingType": "Free"
},
"title": "3/4/5/6/8inch 110V Magic Crystal Globe Desktop Lightning Lamp Plasma Ball Sphere",
"user_args": {
"advanced": null,
"pages": {
"entries_per_page": 10,
"page_number": 10
},
"search_terms": "ball"
}
}
}
我不知道为什么我会收到这个未定义的错误，因为我确保为ajaxResponse返回response.Object。如有任何帮助，我们将不胜感激！
有几个问题
首先，您通常应该返回一个对象数组，而不是一个具有枚举属性的对象。
而不是这个：
{
{
"0": {
"country": "US",
},
"1": {
"country": "CN",
}
}
应该是这样的：
[
{"country": "US"},
{"country": "CN"},
]
在这一点上，您不需要使用ajaxResponse函数，制表器将能够直接解析数据。
如果你只能以原始格式返回数据，那就没有问题，但它将我们带到第二个问题上，你得到"未定义错误"的原因是因为响应对象上没有"Object"属性，只有属性"0"、"1"、"2"等。
要将您的响应转换为Tabulator可以理解的内容，您需要使用以下ajaxResponse回调：
ajaxResponse:function(url, params, response){
return Object.values(response);
}
这将把返回的对象转换为对象数组。