Ajax以JSON格式获取数据 - 无法获取未定义或空引用的属性"长度"

use*_*986 3 javascript ajax jquery json datatables

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

https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js第38行第38行未处理的异常

0x800a138f - JavaScript运行时错误:无法获取未定义或空引用的属性"长度"

这是我的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'
        }
    });
});
Run Code Online (Sandbox Code Playgroud)

这是我从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
    }
]
Run Code Online (Sandbox Code Playgroud)

Gyr*_*com 8

原因

使用jQuery DataTables的错误Unable to get property 'length' of undefined or null reference(IE)或Cannot read property 'length' of undefined(其他浏览器)通常意味着插件无法访问来自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" }
    ]
});
Run Code Online (Sandbox Code Playgroud)

DEMO

有关代码和演示,请参阅此jsFiddle.