angular.copy when array has custom property

Question

Consider following example:

var ar = [4, 2, 3];
ar.$x = 'something';
var br = angular.copy(ar);
console.dir(br);

br does not have $x property any more, because when copying array, angular iterates with for (;;;) which does not see custom properties (if it iterated with for in then it would work).

Which of following shall I do?

1. Create array like class and then assign property;
2. If it's bug, report to angular;
3. Change my code, because assigning property to array is not good practice;

Answer 1

Try angular.merge() This is a deep copy that includes enumerable properties.

var ar = [4, 2, 3];
ar.$x = 'something';
var br = angular.merge([], ar);
console.dir(br);

Output

Array[3]
  0: 4
  1: 2
  2: 3
  $x: "something"
  length: 3
  __proto__: Array[0]

Answer 2

I think that it's not an Angular problem. If you call such a statement:

ar.$x = 'something';
console.log(Object.prototype.toString.call(ar));

You will see that [object Array] will be logged. That is how Array.isArray() method works, and, in its turn, that is how angular copy() method decides how to iterate through the entity passed as the argument. This detection is crucial beacuse for ... in loop on an array can make some confusions in other cases. Here is described why: Why is using "for...in" with array iteration a bad idea?

I would advise you to change your code, for this particular case.

Answer 3

Try using jQuery:

jQuery.extend([], ar);

var ar = [4, 2, 3];
ar.$x = 'something';
var br = jQuery.extend([], ar);
console.dir(br);