javascript - AngularJS 中的数组属性转换

Question

我在 JavaScript 中有一个普通数组:

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

然后，我有 angular-google-maps 模块，将这些点绘制为屏幕的路径。

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

但是，该指令期望路径由一组位置组成，如下所示:

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

有什么方法可以简单地将我的第一个数组转换为 ui-gmap-polyline 期望的数组吗？我正在考虑编写一个过滤器，但我不确定这是否是最好的方法。位置将被添加(并可能更改)到 myArray，并且我希望 Google map 随之更新。另一种方法是观察 myArray 的更改并每次创建一个新数组以提供给 Map，但我似乎缺少一个非常简单的解决方案。

例如:path="myArray | filter:coords" -> 有什么方法可以过滤数组以仅返回每个元素的某些字段吗？

编辑:myArray 是一个同步的 $firebaseArray ( https://www.firebase.com/docs/web/libraries/angular/api.html#angularfire-firebasearray )。当后端更新时，Firebase API 会自动更新此数组(不受我的控制)。

Answer 1

您可以使用map

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

演示

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>