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

Cymen · Accepted Answer · 2015-06-23 17:08:40Z

4

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.

answered Jun 23, 2015 at 17:08

Cymen

14.5k4 gold badges58 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ali_bean Over a year ago

Hey thanks for the reply, i tried this and it is still giving undefined

Cymen Over a year ago

@Ali_bean yeah, you're code is doing some weird things. I'd recommend figuring out how async works and then come back to it.

Ali_bean Over a year ago

Will have a look into it, thanks! I have 5k markers and i need to be able to utilise marker manager

Kevin Seifert · Accepted Answer · 2015-06-23 17:05:28Z

0

With callbacks in javascript, you generally don't return data. You pass in another function reference into the handler as a callback.

EG:

function getMarkers2(f) { 
    // do stuff
    //when done
    f(batch2)
}

answered Jun 23, 2015 at 17:05

Kevin Seifert

3,5921 gold badge21 silver badges14 bronze badges

Comments

Ali_bean · Accepted Answer · 2015-06-25 10:47:51Z

Ended up just passing making the marker manager global and passing mgr into the query which worked, probably not the most efficient way to do it

function getMarkers2(mgr) {

        Parse.initialize("X", "Y");

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

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

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

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

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

                    var image = {
                        url: 'warning.png',
                        size: new google.maps.Size(50, 46),
                        // The origin 
                        origin: new google.maps.Point(0, 0),
                        // The anchor 
                        anchor: new google.maps.Point(25, 0)
                    };

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

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

    function setupMarkers() {
        var mgrOptions = { borderPadding: 50, maxZoom: 15, trackMarkers: true };
        mgr = new MarkerManager(map,mgrOptions);

        google.maps.event.addListener(mgr, 'loaded', function(){

            getMarkers2(mgr);
            getMarkers(mgr);

            console.log("added");
        });
    }

Collectives™ on Stack Overflow

returning object from a javascript function with database query inside

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related