push to array within function

Question

I'm trying to build an array of latitudes and longitudes for start/end points for routing.

function parkRoute(){
    var start = $('#start').val();
    var end = $('#end').val();
    var points = [];
    function printPoints(points){
    console.log(points)
    }
    function getXY(add){
        geocoder.geocode( {'address': add + ", glendale, ca"}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                if (results[0].geometry.location) {
                    var lon = results[0].geometry.location.kb;
                    var lat = results[0].geometry.location.jb;
                    points.push(lat,lon);
                    console.log(points)
                }
            }
        })          
    }
    getXY(start);
    getXY(end);
    printPoints(points);
}

It prints out an empty array first even though I'm calling another function to print them after the function to create the array.

[]                                      parks1.js:192

[34.1480811, -118.24759369999998]               parks1.js:201

[34.1480811, -118.24759369999998, 34.1851925, -118.27651679999997] parks1.js:201

What am I doing wrong?

possible duplicate of How to return the response from an AJAX call? — James Montagne
– James Montagne, Commented May 21, 2013 at 14:49

bfavaretto · Accepted Answer · 2013-05-21 14:48:07Z

9

You are printing the array contents before pushing. The geocoding operation is asynchronous, so you have to print from the async callback.

answered May 21, 2013 at 14:48

bfavaretto

72k18 gold badges118 silver badges162 bronze badges

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

Comments

Denys Séguret · Accepted Answer · 2013-05-21 14:49:39Z

2

The problem is that you're not waiting for all the callbacks, which are asynchronous, to be executed.

You could do this :

var inProcess = 0; // number of tasks we're waiting for
function getXY(add){
    inProcess++; // increment the number of tasks
    geocoder.geocode( {'address': add + ", glendale, ca"}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            if (results[0].geometry.location) {
                var lon = results[0].geometry.location.kb;
                var lat = results[0].geometry.location.jb;
                points.push(lat,lon);
                console.log(points)
            }
        }
        oneProcessIsDone();
    })          
}
function oneProcessIsDone() {
    if (--inProcess==0) { // decrement the number of tasks, and print the points if all are done
        printPoints(points);
    }
}
getXY(start);
getXY(end);

answered May 21, 2013 at 14:49

Denys Séguret

384k90 gold badges813 silver badges779 bronze badges

3 Comments

bfavaretto Over a year ago

I'd transfer my +8 to your answer if I could.

Denys Séguret Over a year ago

I'd steal them if I could :)

marchWest Over a year ago

Thanks for the help and to you too @bfavaretto. I got that I wasn't waiting till the processes were done, I just couldn't figure out at what point in the code that the process was finished. Thanks for explaining it and providing an example.

Collectives™ on Stack Overflow

push to array within function

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related