javascript - JSON 格式的 Ajax 源数据 - 无法获取未定义或空引用的属性 'length'

Question

我正在尝试将 json 数据(从 Web API ajax 调用中检索)加载到 jQuery DataTables，但出现以下错误:

Unhandled exception at line 38, column 314 in https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js

0x800a138f - JavaScript runtime error: Unable to get property 'length' of undefined or null reference

这是我的 jQuery 调用:

$(document).ready(function () {
    $('#stat').DataTable({
        "responsive": true,
        "paging": false,
        "ordering": false,
        "info": false,
        "bFilter": false,
        "processing": true,
        "serverSide": true,
        "ajax": {
            'url': 'http://localhost:61178/api/financeStats'
        }
    });
});

这是我从 Web API 调用中检索到的 JSON 数据:

[
    {
        "Description": "Total Sas debt at yesterday",
        "TotAgents": 788,
        "TotAmount": 1767595.5854
    },
    {
        "Description": "Total CL Sas with Rid worked yesterday",
        "TotAgents": 413,
        "TotAmount": 3026100
    },
    {
        "Description": "Total CL Sas with No Rid worked yesterday",
        "TotAgents": 164,
        "TotAmount": 1252650
    },
    {
        "Description": "Total Debt Sas with Rid to be cleared today",
        "TotAgents": 35,
        "TotAmount": 59448.7522
    },
    {
        "Description": "Debt Sas with No Rid to be cleared today",
        "TotAgents": 157,
        "TotAmount": 478285.384
    },
    {
        "Description": "Today Claim opened",
        "TotAgents": 125,
        "TotAmount": 146262.6726
    },
    {
        "Description": "Today Claim still opened",
        "TotAgents": 51,
        "TotAmount": 113485.4991
    },
    {
        "Description": "Today Claim opened & postponed",
        "TotAgents": 18,
        "TotAmount": 27726.748
    },
    {
        "Description": "Today Claim closed by the operators",
        "TotAgents": 8,
        "TotAmount": 4540.1682
    },
    {
        "Description": "Today Claim closed by the system",
        "TotAgents": 47,
        "TotAmount": -4699.3427
    },
    {
        "Description": "Today Claim Locked Sdd",
        "TotAgents": 1,
        "TotAmount": 5209.6
    },
    {
        "Description": "Today Claim Locked No Sdd",
        "TotAgents": 0,
        "TotAmount": 0
    },
    {
        "Description": "Today Claim UnLocked proposal",
        "TotAgents": 0,
        "TotAmount": 0
    },
    {
        "Description": "Overall Claim Locked Sdd",
        "TotAgents": 3,
        "TotAmount": 7196.54
    },
    {
        "Description": "Overall Claim Locked No Sdd",
        "TotAgents": 2,
        "TotAmount": 1714.1
    },
    {
        "Description": "Overall Claim Unlocked proposal",
        "TotAgents": 3,
        "TotAmount": -155.33
    },
    {
        "Description": "Overall Workout",
        "TotAgents": 541,
        "TotAmount": 619838.3527
    }
]

Answer 1

原因

错误 Unable to get property 'length' of undefined or null reference (IE) or Cannot read property 'length' of undefined (other browsers) with jQuery DataTables 通常意味着插件无法访问响应 Ajax 请求的数据。

你的代码有几个问题

• 您已使用 serverSide: true 启用了服务器端处理模式，但您的数据格式化为客户端处理模式。删除 serverSide: true 以使用客户端处理模式。
• 您的数据是对象数组。在这种情况下，您需要使用 columns使用 data 在数据集中为每一列定义属性名称的选项选项。
• 您需要使用dataSrc: "" 来匹配您的JSON 数据格式，参见dataSrc了解更多信息。

解决方案

使用下面的代码:

$('#stat').DataTable({
    "responsive": true,
    "paging": false,
    "ordering": false,
    "info": false,
    "searching": false,
    "ajax": {
        "url": "http://localhost:61178/api/financeStats",
        "dataSrc": ""
    },
    "columns": [
        { "data": "Description" },
        { "data": "TotAgents" },
        { "data": "TotAmount" }
    ]
});

演示

参见 this jsFiddle用于代码和演示。