为什么使用 Tabulator 时我的数据发送为未定义？答案

【问题标题】：Why is my Data sent as Undefined when using Tabulator?为什么使用 Tabulator 时我的数据发送为未定义？
【发布时间】：2018-11-28 20:46:22
【问题描述】：

我正在尝试将应该是搜索结果的 JSON 数据插入到我的制表器中，然后应该在它们各自的列中显示搜索结果。这是我的代码：

<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

这是我发送到 Tabulator 的 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。任何帮助将不胜感激！

【问题讨论】：

标签： javascript html json tabulator

【解决方案1】：

这里有几个问题

首先，您通常应该返回一个对象数组，而不是具有枚举属性的对象。

而不是这个：

{
   {
    "0": {
        "country": "US",
    },
    "1": {
        "country": "CN",
    }
}

应该是这样的：

[
    {"country": "US"},
    {"country": "CN"},
]

此时您不需要使用 ajaxResponse 函数，制表器将能够直接解析数据。

如果您只能以原始格式返回数据，那没有问题，但它会将我们带到第二个问题，您收到“未定义错误”的原因是因为响应中没有“对象”属性对象，只有属性“0”、“1”、“2”等...

要将您的响应转换为 Tabulator 可以理解的内容，您需要使用以下 ajaxResponse 回调：

ajaxResponse:function(url, params, response){
    return Object.values(response);
}

这会将您返回的对象转换为对象数组。

【讨论】：