Transform array attribute in AngularJS

Question

I have a plain array in JavaScript:

$scope.myArray = [{ "coords" : { "lat" : 0, "long" : 0 } }, { "coords" : { "lat" : 1, "long" : 1 } }, { "coords" : { "lat" : 2, "long" : 2 } }];

Then, I have the angular-google-maps module, to draw these points as paths to the screen.

<ui-gmap-google-map center='map.center' zoom='map.zoom'>
    <ui-gmap-polyline path="myArray" stroke="p.stroke" visible='p.visible' geodesic='p.geodesic' fit="false" editable="p.editable" draggable="p.draggable" icons='p.icons'>
    </ui-gmap-polyline>
</ui-gmap-google-map>

This directive, however, expects path to by an array of positions, like this:

$scope.myArray = [{ "lat" : 0, "long" : 0 }, { "lat" : 1, "long" : 1 }, { "lat" : 2, "long" : 2 }];

Is there any way to simply transform between my first array to the one the ui-gmap-polyline expects? I was thinking about writing a filter, but I'm not sure if that's the best way. Positions will be added (and possibly changed) to myArray, and I want the Google Map to update along with this. Another way would be to watch myArray for changes and create a new array every time to feed to the Map, but there seems to be a very simple solution I'm missing.

e.g.: path="myArray | filter:coords" -> is there any way to filter an array to only return certain fields of each element?

Edit: myArray is a synchronised $firebaseArray (https://www.firebase.com/docs/web/libraries/angular/api.html#angularfire-firebasearray). This array is updated by the Firebase API automatically when the backend is updated (out of my control).

This being a Firebase array makes all the difference. What kinds of changes to your dataset can you expect? Is it append-only? Will existing coords be modified? — Anid Monsur, Oct 15 '15 at 17:55

Tushar · Accepted Answer · 2015-10-15T06:12:08.480

3

You can use map

arr.map(function(e) { return e.coords; });

Demo

var arr = [{
  "coords": {
    "lat": 0,
    "long": 0
  }
}, {
  "coords": {
    "lat": 1,
    "long": 1
  }
}, {
  "coords": {
    "lat": 2,
    "long": 2
  }
}];

arr = arr.map(function(e) {
  return e.coords;
});

console.log(arr);
document.getElementById('output').innerHTML = JSON.stringify(arr, 0, 2);

<pre id="output"></pre>

edited Oct 15 '15 at 06:12

answered Oct 15 '15 at 05:52

Tushar

85,780
21
159
179

Was just about to suggest this. – Kevin Friedheim Oct 15 '15 at 05:52
methinks simplest: `arr.map(function(el){ return e.coords; })` – Grundy Oct 15 '15 at 05:56
Thanks! This function always returns a new array, however. Is there any way to integrate this with the _memoize function to avoid digest errors (Error: [$rootScope:infdig] 10 $digest() iterations reached.)? – Flock Dawson Oct 15 '15 at 06:21
@FlockDawson Try `$scope.myArray = $scope.myArray.map(function(e) { return e.coords; });` – Tushar Oct 15 '15 at 06:29
@FlockDawson Don't assing the array directly to the scope, first map it and then assing to the scope – Tushar Oct 15 '15 at 06:33
@Tushar Yes, it does work then. But this has the disadvantage that updates are not persisted. The original array is a synchronised $firebaseArray, which get updated when the backend is updated. – Flock Dawson Oct 15 '15 at 11:54

Transform array attribute in AngularJS

1 Answers1