Why "Uncaught TypeError: Cannot read property 'length' of undefined"

mapeters

I'm new to DataTables and everything else about server-side development work, so I hope this isn't too elementary a question to ask.

I get the above error when a page tries to load a table using server-side ajax command. In Chrome's developer's tools "Console" tab it says that error happens in jquery.dataTables.js:2673, which is this:

function _fnAjaxUpdateDraw ( settings, json )
     {
            .
            .
            .
    var data = _fnAjaxDataSrc( settings, json );
    for ( var i=0, ien=data.length ; i<ien ; i++ ) {            <------ Line 2673
        _fnAddData( settings, data[i] );
    }
            .
            .
            .
     }

The file doing the load contains this:

$(document).ready(
function() {
$('table#venues').DataTable(
{
serverSide: true,
ajax: "/api/venues",
columns: [
{ data: "name" },
{ data: "description" },
{ data: "settingid" }
]
}
);
$('table#venues').on('xhr.dt', function(e, settings, json) {
console.log(json);
});
}

When that runs the "console.log(json)" line outputs this:

{"draw":1,"recordsTotal":11236,"recordsFiltered":10,"data":[{"name":"AA_johnhay-manor","description":"Camp John Hay Manor Hotel","settingid":0},{"name":"AA_naia1-clubmanila","description":"MNL - Ninoy Aquino International Airport","settingid":0},{"name":"AA_pal-mactanintl","description":"CEB - Mactan International Airport Departure A","settingid":0},{"name":"AA_starbucks-rpmla","description":"STARBUCKS Coffee","settingid":0},{"name":"Adael_anatole","description":"Anatole","settingid":0},{"name":"Adael_beaujolais","description":"Le Beaujolais","settingid":0},{"name":"Adael_caferuc","description":"Cafe Ruc","settingid":0},{"name":"Adael_cafetrocadero","description":"Cafe du Trocadero","settingid":0},{"name":"adael_cccafedesarts","description":"Cafe des Arts","settingid":0},{"name":"Adael_chezbebertparnasse","description":"Chez Bebert (Montparnasse)","settingid":0}]}

By everything I presently know, all of that is correct. The error seems to be telling me that there is no "data" field in the JSON object, but that field does exist. I've double-checked the route used with "CocoaRestClient", and it looks like correct JSON is returned.

Am I making some newbie mistake here that I don't see?

Thanks,

Mark

mapeters

I was able to "fix" the problem, but the solution doesn't seem right. In a nutshell, the problem was that the json object my node.js server returned in response to the ajax get of "/api/venues" arrived as a string, not a json object, and hence there was no "data" field. I resolved that by adding a "dataSrc" field in the DataTable initialization object, making the containing function look like this:

function() {
    $('table#venues').DataTable(
        {
            serverSide: true,
            ajax: {
                url: "/api/venues",
                dataSrc: function (json) {
                    var obj = JSON.parse(json);
                    console.log(obj);
                    return obj;
                 }
            },
            columns: [
                { data: "name" },
                { data: "description" },
                { data: "settingid" }
            ]
        }
    );
} 

This solution doesn't seem right because it is odd that a conversion from string to JSON object is routinely necessary - why did the JSON object in my node server end up as a string requiring conversion back to JSON?

I hope the code snippet is formatted okay - despite using the suggested before and after markers, it doesn't look readable in preview.

Mark

allan

why did the JSON object in my node server end up as a string requiring conversion back to JSON?

There must be something outputting the object as a string rather than as an unquoted JSON object. I'm not sure what would cause that in the Node.JS backend though.

Allan