"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 sometimes shows up. In Chrome console I'm getting the error:

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

Here is the demo page.

I'm using Bootstrap alongside this plugin.

Answer 1

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 2

I'm working on Ruby on Rails with gem jquery-datatables-rails.

I update the gem directly from the last commit on GitHub:

gem 'jquery-datatables-rails', github: "rweng/jquery-datatables-rails", branch: "master"

This work for me, I suppose that that they will release soon a new version of the gem with this commit.

Answer 3

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 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

Whilst unrelated to DataTables, I came across this "cannot use in operator to search for length" error. This was the main Google result for the error so just wanted to post my issue as a response in case it helps anyone else.

I had:

ApplicationIDs: $.map(".application-checkbox:checked", function (checkedApplicationCheckbox, i) {

I'd forgotten to wrap my selector with the $ so the fix was to make sure I was passing the actual jQuery elements as the first argument to map and not just a string...

ApplicationIDs: $.map($(".application-checkbox:checked"), function (checkedApplicationCheckbox, i) {

I'm almost embarrased to post this ;)

Cheers

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;
}

Answer 7

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.