can someone help with passing the below json data to Tabulator thru the ajaxResponse function? Would be much helpful for a complete example of how to construct a table from the json data below. Thanks advance for your help.
Below is the Data Loading Error from Chrome Console: Also attached screen capture of Console Error
tabulator.min.js:3 Data Loading Error - Unable to process data due to invalid data type Expecting: array Received: object Data:
{5ofq7: {…}, l4uey: {…}, 66ute: {…}, f3wc2: {…}, v6lm2: {…}, …}
5ofq7: id: "39570" item_key: "5ofq7" name: "AustralianSuper Pty Ltd" ip: "101.112.84.10"
meta: 9665u: "AustralianSuper Pty Ltd" jrv58: "AustralianSuper High Growth" syqxv: "ISF0031AU" mbwaa: "100000" clc6v: "" og0n12: "4.47" m0tyf: "" mf8ge: "17.52" r58wq2: "12.17" af3q82: "10.37" ri3w1: "9.86" krmsm: "" f8zyy2: "5.92" kztr1: "" pi5q4: "7.35" luul4: "6.31" p9vvi: "" fi17d: "" eft3z: "" b7omg: "" 9n8sj: "" 187j5: "" 166p3: "8.71" 9k83f: "12.43" v5jn5: "14.07" 8qs59: "AustralianSuper Pty Ltd" 8j6t8: "10496" kvwkh2: "0.51" g7pnc2: "" dfka2: "" zrpgi2: "" lkg952: "" o77jo: "" 15cc6: "Multisector Aggressive" 73vew: "Superannuation Fund" n5i51: "Morningstar Aus Msec Aggressive TR AUD" jvkfe: "Open" t1yvr: "0" kcn4h: "0" hwdr8: "29.989" ivfki: "49.708" rzr0z: "2.119" 9bw4z: "2.911" 8cpa5: "4.042" 6hq0z: "6.91" 1y2l7: "1.69" yl46p: "1.69" ih8bm: "" zds53: "" v1y5k: "" fq04j: "" en2oj: "" stvhv: "" rjap92: "Admin" rjap92-value: "1"
Managed to hack together a solution that works, definitely can be improved on by more experienced developers. Thanks to #Arnauld and #Felix Kling - this solution is based on their SO contributions.
<div id="example-table"></div>
<script>
var table = new Tabulator("#example-table", {
autoColumns:true,
height: 500,
layout: "fitData",
layoutColumnsOnNewData:true,
ajaxURL:"https://xxxxx.com/wp-json/frm/v2/forms/22/entries?",
ajaxResponse:function(url, params, response){
var obj = response;
var res = [];
Object.keys(obj).forEach(k => { //Convert nested objects to array of objects
Object.keys(obj[k]).forEach(v => {
(res[v] = (res[v] || { id: v }))[k] = obj[k][v];
});
});
res=res.meta; //Select the required object from array
var obj = res;
var data =[]; //Convert object to required array format needed for Tabulator
function toArray(obj) {
const result = [];
for (const prop in obj) {
const value = obj[prop];
if (typeof value === 'object') {
result.push(value);
}
else {
}
}
return result;
}
data=toArray(res);
return data;
},
});
</script>