ng-repeat loops over Array Like objects instance methods when length is 0

[corbanbrook]

Starting in angular 1.4.8 Array Like objects, ie Collection Classes which extend Array behave strangely in ng-repeat.

ng-repeat works correctly when length is > 0 and only loops over elements in the array but when length == 0 any non array element properties are looped over instead.

function BaseCollection(){}
BaseCollection.prototype = Array.prototype;
var child = new BaseCollection();
child.someProperty1 = true
child.someProperty2 = true

Even tho child is empty with length of 0 ng-repeat will loop over the 2 non element properties.

Works correctly in angular 1.4.7 but problem is reproducible in 1.4.8 and 1.5.0-rc.0

[reppners]

+1 same here - breaks our view model that inherits from Array. Any known workarounds?

[corbanbrook]

My work around was to add a $toArray() method to the collection class which returns a straight up array.

<li ng-repeat="comment in comments.$toArray()">

But i don't like doing that.

[Narretz]

This is due to 70edec9, specifically the added test for ngRepeat.

I played around with this, but I didn't find a solution that supports both cases (but that doesn't mean there is none)

Imo, having an object with array prototype seems more common to me than an object that has a random length: 0 property.

e: this might work: Array.prototype.isPrototypeOf(instance) But I assume isArrayLike has requirements for performance, so not sure if we can use it.

cc @petebacondarwin

[lgalfaso]

This is not an easy problem as in JavaScript an object that extends Array is not an Array but an Object.

Check line 17 of the examples at https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray

An option would be to change isArrayLike and change https://github.com/angular/angular.js/blob/master/src/Angular.js#L209

to

if (isArray(obj) || isString(obj) || (obj instanceof Array) || (jqLite && obj instanceof jqLite)) return true;

and have a performance hit

[vddrift]

My workaround:
<li ng-if="comments.length>0" ng-repeat="comment in comments">

[lgalfaso]

Just for completeness on #13560 (comment)
This fix would not handle the case when an object from another window is imported, this object extends Array and is of size 0.

[gkalpak]

After poking at this a bit, I couldn't indeed find a way to detect an instance of an Array subclass imported form another window (assuming that by "importing" you mean passing with something like window.postMessage()). Yet, this seems to rather be an issue with how the structured clone algorithm works, so I don't think we can do much about it.

That shouldn't be too much of an issue though, since it is a rare usecase and it doesn't work now anyway, so we don't lose much by not properly supporting this.

That said, the addition of obj instanceof Array seems to do the trick. Putting it at the end of the return statement (after having checked for isNumber(length) and length >= 0), should have minimal overhead, so I think the performance hit will be negligible.

WDYT ?

[splintor]

For the record, my workaround is to always add a -1 property to my array-like object.
This is based on the (length - 1) in obj check at the end of the isArrayLike function.

angular.js/src/Angular.js

Line 224 in 4a12ae7

(length >= 0 && ((length - 1) in obj || obj instanceof Array) || typeof obj.item === 'function');

If -1 is defined in the array-like object, this check will make isArrayLike to return true.

My only problem with this workaround is that I have no easy way to unit test it, as isArrayLike is private. I would test angular.forEach but it uses different logic than ng-repeat - it also checks for forEach - so the test won't test what our actual use, as we need this workaround for our ng-repeat usages.