具有复杂嵌套 json 数据属性的制表符 ajaxResponse

Question

有人可以帮助通过 ajaxResponse 函数将以下 json 数据传递给 Tabulator 吗？对于如何从下面的 json 数据构建 table 的完整示例将非常有帮助。提前感谢您的帮助。

以下是来自 Chrome 控制台的数据加载错误：Also attached screen capture of Console Error

tabulator.min.js:3 数据加载错误 - 由于数据类型无效，无法处理数据期望：数组收到：对象数据：

{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"

Answer 1

设法拼凑出一个有效的解决方案，绝对可以由更有经验的开发人员进行改进。感谢#Arnauld 和#Felix Kling - 这个解决方案基于他们的 SO 贡献。

    <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>

具有复杂嵌套 json 数据属性的制表符 ajaxResponse

Tabulator ajaxResponse with complex nested json data properties

algorithm

debugging

tabulator