“Uncaught TypeError: Cannot use 'in' operator to search for 'length' in ” triggered by Datatables plugin and jQuery 1.11.3

Question

I\'m using the jQuery Datatables plugin to enable pagination, sorting and searching with my tables. The elements are showing up but not working, and the pagination only sometime

Answer 1

I had this exact same issue but jQuery version was not the culprit for me. In my case, I was incorrectly serializing the form. The code ended up with this error was:

$('#form_name').serialize()

Whereas I should have used.

$('#form_name').serializeArray()

I did this and my issue was resolved.

Just throwing out this little piece that I ignored. Could help someone out there.

Answer 2

That error is because of the method isArraylike in jQuery version 1.11.3. (only). The method looks like this

function isArraylike( obj ) {

    // Support: iOS 8.2 (not reproducible in simulator)
    // `in` check used to prevent JIT error (gh-2145)
    // hasOwn isn't used here due to false negatives
    // regarding Nodelist length in IE
    var length = "length" in obj && obj.length, // <------ THIS IS THE CULPRIT
        type = jQuery.type( obj );

    .......
}

That version of jQuery was using "length" in object to get the length. (I do not know anything about it).

But I do know that no other versions of jquery have that issue.

The versions 1.11.3 and 2.1.4 (as James pointed out in the comments) have this issue.

So the solution would be to just upgrade to the next version or at least use any other version apart from 1.11.3 or 2.1.4

Answer 3

With DataTables and calling a PHP-script with AJAX, be aware that you just must echo your array at the end. There is no need of encoding it first to a JSON object with json_encode.

So

header('Content-type:application/json;charset=utf-8'); 
echo $myArray // This will do. Do not use echo json_encode($myArray);
exit();

Otherwise you might end up with the dreadful error

Uncaught TypeError: Cannot use 'in' operator to search for 'length' in

or this one

Uncaught TypeError: Cannot read property 'length' of undefined

Answer 4

No need to downgrade jQuery. I solved the same error by using aoColumns as

$('#id').DataTable( {
    data: [["A", "B"], ["a", "b"]],
    'aoColumns': [ 
        { sWidth: "50%", bSearchable: false, bSortable: false }, 
        { sWidth: "50%", bSearchable: false, bSortable: false }
        ],
    } );

I am using jQuery 2.1.4 and DataTables 1.10.9

Answer 5

Upgrading to DataTables to DataTables 1.10.7 or 1.10.8-dev did not work for me (using jQuery 1.11.3).

Downgrading to jQuery 1.11.2 did work (using DataTables 10.0.0)

Answer 6

I fixed a similar issue by adding the json dataType like so:

$.ajax({
    type: "POST",
    url: "someUrl",
    dataType: "json",
    data: {
        varname1 : "varvalue1",
        varname2 : "varvalue2"
    },
    success: function (data) {
        $.each(data, function (varname, varvalue){
            ...
        });  
    }
});

And in my controller I had to use double quotes around any strings like so (note: they have to be escaped in java):

@RequestMapping(value = "/someUrl", method=RequestMethod.POST)
@ResponseBody
public String getJsonData(@RequestBody String parameters) {
    // parameters = varname1=varvalue1&varname2=varvalue2
    String exampleData = "{\"somename1\":\"somevalue1\",\"somename2\":\"somevalue2\"}";
    return exampleData;
}