CODEWITHSUNDEEP
javascriptarrays
Kenny Coleman
Kenny Coleman

Reputation: 186

returning values populated in an array from one function to another in javascript

I'm doing a search through google maps, and I want to populate every location in an array. This allows me to sort properly since the API can lag at times and the JSON being returned may not be done correctly.

This is using the Google Maps Places API. Some code is left out to keep it brief. I'm able to get the array to populate within a function, but when I try to pass it to another function it's blank.

   var liquorSearchParams = {
        location: latLong,
        rankBy: google.maps.places.RankBy.DISTANCE,
        types: ['liquor_store']
    };

    //Call the google maps service to perform the search 
    var service = new google.maps.places.PlacesService(map);
        service.nearbySearch(liquorSearchParams, callback);

   //Set my blank array
    var allPlaces = [];

    function callback(results, status) {
      if (status == google.maps.places.PlacesServiceStatus.OK) {
        for (var i = 0; i < results.length; i++) {
          //createMarker(results[i]);
          addPlaceToArray(results[i]);
          //this console.log just shows []
          console.log(allPlaces);
        }

      }
    }

    function addPlaceToArray(place) {
        var placeIdRequest = {
          placeId: place.place_id
        };
        service.getDetails(placeIdRequest, placeDetailCallback);
    };

    function placeDetailCallback(placeDetail, status) {
        if (status == google.maps.places.PlacesServiceStatus.OK) {
            var destinationPoint = new google.maps.LatLng(placeDetail.geometry.location.k, placeDetail.geometry.location.B);
            var theDistance = google.maps.geometry.spherical.computeDistanceBetween(destinationPoint, latLong);

            allPlaces.push({name: placeDetail.name, latitude: placeDetail.geometry.location.k, longitude: placeDetail.geometry.location.B, address: placeDetail.vicinity, phone: placeDetail.formatted_phone_number, website: placeDetail.website, distance: theDistance});
            //this console.log returns the populated array that i want
            console.log(allPlaces);
            return allPlaces;
        }
    };

Upvotes: 0

Views: 81

Answers (1)

Adam C
Adam C

Reputation: 585

I expect that this is happening because allPlaces.push(...) happens in a callback which happens after the console.log(allPlaces).

Here the actual sequence of events as far as I can tell:

  1. You retrieve some liquor stores
  2. You iterate through them
  3. For each store you:
    1. initiate a request for more details
    2. immediately do a console.log(allPlaces) - which is empty because step 3 hasn't happened yet
    3. when the request for more details finishes, you push the details to the allPlaces array.

What you need to do is do the console.log(allPlaces) once all the placeDetailCallbacks have been completed. I recommend Async.js or something similar.

Using Async.js:

var liquorSearchParams = {
    location: latLong,
    rankBy: google.maps.places.RankBy.DISTANCE,
    types: ['liquor_store']
};

var allPlaces = [];

function callback(results, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    async.each(results, addPlaceToArray, function(err) {
        // this gets executed when all places have been added to allPlaces
        console.log(allPlaces);
    });
  }
}

//This is called for each item in the results array
//The done parameter is a callback you call when you are, well, done.
function addPlaceToArray(place, done) {
    var placeIdRequest = {
      placeId: place.place_id
    };

    var placeDetailCallback = function(placeDetail, status) {
        var destinationPoint = new google.maps.LatLng(placeDetail.geometry.location.k, placeDetail.geometry.location.B);
        var theDistance = google.maps.geometry.spherical.computeDistanceBetween(destinationPoint, latLong);

        allPlaces.push({name: placeDetail.name, latitude: placeDetail.geometry.location.k, longitude: placeDetail.geometry.location.B, address: placeDetail.vicinity, phone: placeDetail.formatted_phone_number, website: placeDetail.website, distance: theDistance});
        done(); //if an error occurred here, you can pass it to done
    };

    service.getDetails(placeIdRequest, placeDetailCallback);
};

//Call the google maps service to perform the search 
var service = new google.maps.places.PlacesService(map);
service.nearbySearch(liquorSearchParams, callback);

Upvotes: 1

Related Questions