Can't push string to array after successful callback

Question

function updateScreenContent() {
    app.map.mapObject.getVisibleRegion(function (bounds) {
        app.ajaxUpdater = $.ajax({
            type: "GET",
            url: "myapi.com/chickens/",
            data: {coordinates: bounds.toUrlValue()},
            dataType: "JSON"
        })
            .done(function (mapItems, status) {
                for (var i = 0; i < mapItems.length; i++) {
                    if (!matchFound) {
                        app.map.mapObject.addMarker({
                            position: new plugin.google.maps.LatLng(mapItems[i].latitude, mapItems[i].longitude),
                            icon: app.map.icons.stop
                        }, function (item) {
                            item.id = mapItems[i].id;
                            app.map.mapContent.push("PUSH ME INTO THE ARRAY!!!!!");
                        });
                    }
                }
            })
    });
}

The above function is called every time the map becomes idle in our application, this could be as much as every 500 milliseconds or longer depending on when the user stops moving the map.

My problem is I can't seem to add any content to my mapContent array inside of the callback where the markers have been successfully added. I know that it's being called because I've put an alert in there and also the markers are successfully added to the map.

Whenever I check the length of mapContent it's always 0. It makes no sense at all! If I push to the array outside of the callback it works.

Any ideas?

EDIT:

addMarker is an asynchronous function. Could this be why?

What happens if you console.log(app.map.mapContent.length) right after the push? — Zlatin Zlatev
– Zlatin Zlatev, Commented Jun 11, 2014 at 12:38
I suspect it's a closure issue; when that anonymous function calling app.map.mapContent.push executes, the value of i isn't a valid index because JavaScript doesn't (automatically) have block level scoping of variables. Essentially, when that function executes the value of i is its final value of the loop, not the value it had when addMarker was actually called. That results in an error being thrown by the line above the push, and it never being called. — Anthony Grist
– Anthony Grist, Commented Jun 11, 2014 at 12:38

Anthony Grist · Accepted Answer · 2014-06-11 12:42:10Z

1

I suspect it's a closure issue; when that anonymous function calling app.map.mapContent.push executes, the value of i isn't a valid index of the array because JavaScript doesn't (automatically) have block level scoping of variables. Essentially, when that function executes the value of i is its final value of the loop, not the value it had when addMarker was actually called. That results in an error being thrown by the line above the push, since mapItems[i] returns undefined which you can't access an id property on.

You can create a new closure to preserve the value of i for each iteration by using an immediately invoked function expression (IIFE) like so:

(function(i) {
    app.map.mapObject.addMarker({
        position: new plugin.google.maps.LatLng(mapItems[i].latitude, mapItems[i].longitude),
        icon: app.map.icons.stop
    }, function (item) {
        item.id = mapItems[i].id;
        app.map.mapContent.push("PUSH ME INTO THE ARRAY!!!!!");
    });
})(i);

answered Jun 11, 2014 at 12:42

Anthony Grist

38.4k8 gold badges64 silver badges76 bronze badges

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

2 Comments

jskidd3 Over a year ago

Thanks so much Anthony. I work with closures often yet I still missed this... most frustrating part of JavaScript!

Anthony Grist Over a year ago

@jskidd3 Oh, I have a tendency to forget about it, but there's also the let keyword for creating a block-level i variable in your for loop (much easier and more readable than the IIFE closure). I'm not sure what browser compatibility is like these days, but if you have to support more than the latest few versions of IE it probably isn't an option. MDN entry

Collectives™ on Stack Overflow

Can't push string to array after successful callback

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related