Changing data structure in AngularJS array

Question

Changing data structure in AngularJS array

I'm working with a basic JavaScript array:

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

Next, I want to utilize the angular-google-maps module to display these points as paths on 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>

The ui-gmap-polyline directive, however, requires the path to be an array of positions in simple format like this:

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

Is there an efficient way to convert my initial complex array into the format expected by ui-gmap-polyline? I was considering using a filter but unsure if it's the most effective approach. Any new elements added or changed in myArray should automatically update on the Google Map. Another option could be to watch for changes in myArray and generate a new array each time for mapping purposes, but I feel there might be a simpler solution that I am overlooking.

e.g.: path="myArray | filter:coords"

-> Can an array be filtered to only extract specific fields from each element?

Edit: Just to note, myArray is a synchronized $firebaseArray (). This array receives automatic updates from the Firebase API when changes occur in the backend (beyond my control).

javascript angularjs angularjs-directive angularjs-scope angularjs-ng-repeat

Answer 1

Answer №1

You can utilize the map method

arr.map(function(item) { return item.coordinates; });

Check out this Demo

var arr = [{
  "coordinates": {
    "latitude": 0,
    "longitude": 0
  }
}, {
  "coordinates": {
    "latitude": 1,
    "longitude": 1
  }
}, {
  "coordinates": {
    "latitude": 2,
    "longitude": 2
  }
}];

arr = arr.map(function(item) {
  return item.coordinates;
});

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

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

Answer 2

You can utilize the map method

arr.map(function(item) { return item.coordinates; });

Check out this Demo

var arr = [{
  "coordinates": {
    "latitude": 0,
    "longitude": 0
  }
}, {
  "coordinates": {
    "latitude": 1,
    "longitude": 1
  }
}, {
  "coordinates": {
    "latitude": 2,
    "longitude": 2
  }
}];

arr = arr.map(function(item) {
  return item.coordinates;
});

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

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

Changing data structure in AngularJS array

Answer №1

Similar questions

Maintain the initial value using ko.mapping.fromJS

Implementing the adding functionality within an ejs file

Utilize a dual-color gradient effect on separate words within the <li> element

Utilize Parse cloud code to navigate and interact with object relationships

Tips for adjusting the size of a textarea to perfectly fit within a table cell

Sending data from an AngularJS app to Google App Engine using HTTP post

What is the reason behind "readFile" consuming more memory than the actual length of the file being read?

Endlessly scrolling text using CSS

A tutorial on making a POST request using axios in a React application

I encountered an SyntaxError while working with Ionic. The error message reads: "Unexpected token < in JSON at position 0 at JSON.parse (<anonymous>)."

JS problem with decreasing

Confusion with query parameters across various Socket.IO namespaces

Guide on changing the color of an input box based on the variable size in ReactJs!

The functionality of updating input values via jQuery AJAX in HTML response is currently not functioning as expected

Spacing issues with inline-block elements when dealing with a large quantity of items

Is this included in the total number of reads?

The observable object fails to update the view in Knockout

JavaScript function is returning 'undefined' instead of an integer

Grant permission to access a website even when domain filtering is enabled

Ways to display a US map using d3.js with state names positioned outside each state and pointing towards it