How to merge two different object from JSON data - angularjs

Question

Hi I need some help with this code snippet. The output that I get is multiple different objects of JSON data. But I want to extract the destination data then merge them as an array. But all the data I get is only one data merge as an array, one by one.
Here is the output:
$scope.findHospital = function(){
$ionicLoading.show({
template: '<ion-spinner icon="bubbles"></ion-spinner><br/>Acquiring location!'
});
var posOptions = {
enableHighAccuracy: true,
timeout: 20000,
maximumAge: 0
};
$cordovaGeolocation.getCurrentPosition(posOptions).then(function (position) {
var lat = position.coords.latitude;
var long = position.coords.longitude;
var infowindow;
var myLatlng = new google.maps.LatLng(lat, long);
var mapOptions = {
center: myLatlng,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
service.nearbySearch({
location: myLatlng,
radius: 5000,
type: ['police']
}, callback);
function callback(results, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
createMarker(results[i]);
}
}
}
function createMarker(place) {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(lat, long);
geocoder.geocode({'latLng': latlng}, function(results, status) {
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location
});
var request = { reference: place.reference };
service.getDetails(request, function(details, status) {
console.log(details);
var url = "https://maps.googleapis.com/maps/api/distancematrix/json?units=imperial&origins="+results[0].formatted_address+"&destinations="+details.formatted_address+"&key=AIzaSyDDxMGpu5SP5XwZGrKw5BQWl_r2dgLgpPY";
var distances = [];
$http.get(url).then(function(response){
var str = response.data.rows[0].elements[0].distance.text;
distances = distances.concat(str);
console.log(distances);
});
}
});
}
}
}
CODE UPDATED!

Answer 1

I strongly suspect, distances array is initializing everytime when createMarker method is called. So, put your distances in global scope. i.e. just above your resolving getCurrentPosition promise.
var distances = [];
$cordovaGeolocation.getCurrentPosition(posOptions).then(function (position) {
// your code
and remove distances intialization from inner code.

Answer 2

This is what you need!! A array outside of your function createMarker. When you call $http.get, you should concatenate the response with your distances array.
var distances = []; // HERE
function createMarker(place) {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(lat, long);
geocoder.geocode({'latLng': latlng}, function(results, status) {
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location
});
var request = { reference: place.reference };
service.getDetails(request, function(details, status) {
var url = "https://maps.googleapis.com/maps/api/distancematrix/json?units=imperial&origins="+results[0].formatted_address+"&destinations="+details.formatted_address+"&key=AIzaSyDDxMGpu5SP5XwZGrKw5BQWl_r2dgLgpPY";
$http.get(url).then(function(response){
var str = response.data.rows[0].elements[0].distance.text;
distances = distances.concat(str); // HERE
});
}
});
}