$.each doesn't work when key is 'length'

[BarrieShieh]

$.each( { name: "John", length1: 0 }, function(i, n){
alert( "Name: " + i + ", Value: " + n );
});

this code works fine.

$.each( { name: "John", length: 0 }, function(i, n){
alert( "Name: " + i + ", Value: " + n );
});

this one doesn't work.

I found 1.11.2 and 3.2.0 have such issue. Probably other versions have too.
Chrome 57.0.2987.98

[vivekmarakana]

It's because $.each(obj, callback) checks for obj.length to iterate over key-value pairs, and here you have defined length: 0

Following code works properly:

$.each( { name: "John", length: 2 }, function(i, n){
    alert( "Name: " + i + ", Value: " + n );
});

However, we need to find solution to this as length: <non-zero> works properly and length: 0 does not.

[mgol]

Thanks for the report.

jQuery.each has long worked on array-likes, meaning that if an object has a length property it iterates over it like over an array. Under https://api.jquery.com/jQuery.each/ you can see the note:

Note: The $.each() function internally retrieves and uses the length property of the passed collection. So, if the collection has a property called length — e.g. {bar: 'foo', length: 10} — the function might not work as expected.

I think this could be improved so I opened jquery/api.jquery.com#1032.

If you need to iterate over all keys of objects having the length property, jQuery.each is not the correct solution.

[BobStein]

I gather this can never be "fixed" because that might break existing implementations for array-like objects. My conclusion is, never use $.each() on objects, aka associative arrays. Someday an object of mine may happen to have a member named 'length' with a value exactly zero. $.each() would treat it like an empty array, with hard-to-explain consequences.

More: https://stackoverflow.com/a/49652688/673991

[dmethvin]

@BobStein yes, if you don't want object array-likes to be treated as arrays then you would need to use a different mechanism. Possible alternatives include for-in or for-of, each of which have their own drawbacks as far as the properties enumerated or the browser support.

[ryonlabaw]

After years of working with jquery, I just ran into this problem today. I am working with a json data feed that contains a "length" field. The looper function linked by BobStein works well.
Maybe jquery should think about fixing this in some fashion, or at least documenting the issue on the $.each page?

[dmethvin]

@ryonlabaw It is documented, as mentioned above. We can't "fix" it without breaking documented behavior. Since there are plenty of other alternatives today it doesn't make sense to change it, since if you do want array-like iteration on an object (for example, a NodeList) the current behavior is desired.