returning object from a javascript function with database query inside

Question

I am trying to return the markers as the object but when i run the function it just returns [ ], but printing it inside i can see the object data, can anyone explain how to return the object batch2 please?

google.maps.event.addListener(mgr, 'loaded', function(){
            mgr.addMarkers(getMarkers(),6); //add all the markers! documentation for viewports with totals for city count, look at viewport
            mgr.addMarkers(getMarkers2(),14); //get markers for zoomed out place, add click function to zoom in
            //mgr.addMarkers(getMarkers(1000), 8);
            console.log("added");
            mgr.refresh();
        });

function getMarkers2() {

        var batch2 = [];
        var clusters = new Parse.Query("cityfreqcoords");
        var clusterresults = new Parse.Object("cityfreqcoords");

        clusters.find({
            success: function (results) {
                for (i = 1; i < results.length; i++) {

                    var city = (results[i]["attributes"]["city"]);
                    var count = (results[i]["attributes"]["count"]);

                    var lat = (results[i]["attributes"]["lat"]);
                    var lng = (results[i]["attributes"]["lng"]);

                    var markerLatlong = new google.maps.LatLng(lat, lng);

                    //icon =

                    //adding the marker
                    var marker2 = new google.maps.Marker({
                        position: markerLatlong,
                        title: city,
                        clickable: true,
                        animation: google.maps.Animation.DROP
                        //icon:icon
                    });

                    //adding the click event and info window
                    google.maps.event.addListener(marker2, 'click', function () {
                        map.setZoom(6);
                        map.setCenter(marker2.getPosition());
                    });
                    batch2.push(marker2);
                }
            }
        })
        return batch2;
    }

Answer 1

It would appear that clusters.find is asynchronous. You return batch2 before cluster.find succeeds. There are a handful of patterns for working with asynchronous code in JavaScript -- one common one is to use a callback. You would need to rewrite your code like so:

function getMarkers2(callback) {

    var batch2 = [];
    var clusters = new Parse.Query("cityfreqcoords");
    var clusterresults = new Parse.Object("cityfreqcoords");

    clusters.find({
        success: function (results) {
            for (i = 1; i < results.length; i++) {

                var city = (results[i]["attributes"]["city"]);
                var count = (results[i]["attributes"]["count"]);

                var lat = (results[i]["attributes"]["lat"]);
                var lng = (results[i]["attributes"]["lng"]);

                var markerLatlong = new google.maps.LatLng(lat, lng);

                //icon =

                //adding the marker
                var marker2 = new google.maps.Marker({
                    position: markerLatlong,
                    title: city,
                    clickable: true,
                    animation: google.maps.Animation.DROP
                    //icon:icon
                });

                //adding the click event and info window
                google.maps.event.addListener(marker2, 'click', function () {
                    map.setZoom(6);
                    map.setCenter(marker2.getPosition());
                });
                batch2.push(marker2);
            }
        }

        callback(batch2);
    })
}

Then call it like so:

getMarkers2(function(markers) {
  mgr.addMarkers(markers, 14);
});

If you're interested, take a look at how promises work as you might prefer that approach over using callbacks.