Ajax sourced data in JSON format - Unable to get property 'length' of undefined or null reference

Question

I'm trying to load json data (retrieved from a Web API ajax call) to a jQuery DataTables, but I am getting the following error:

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

This is my jQuery call:

$(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'
        }
    });
});

and this is my JSON data retrieved from the Web API call:

[
    {
        "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
    }
]

Solution

CAUSE

Errors Unable to get property 'length' of undefined or null reference (IE) or Cannot read property 'length' of undefined (other browsers) with jQuery DataTables usually means that the plugin cannot access the data in response from Ajax request.

There are several issues with your code

• You have enabled server-side processing mode with serverSide: true but your data is formatted for client-side processing mode instead. Remove serverSide: true to use client-side processing mode.
• Your data is array of objects. In this case you need to use columns option to define property name in the data set for each column using data option.
• You need to use dataSrc: "" to match your JSON data format, see dataSrc for more information.

SOLUTION

Use the code below:

$('#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" }
    ]
});

DEMO

See this jsFiddle for code and demonstration.

Comments

[Vkl125]

Got "Object doesn't support property or method 'DataTable'" error

[Gyrocode.com]

@Vkl125, most likely you forgot to include DataTable v1.10 JS files, or using older DataTable libary v.1.9.