Confusion in variable scope in javascript

Question

I am having a function in js which populates a global array with values fetched as json from the server script:

function populateValues(id) {
    var values=new Array();

    $.getJSON(
        '<?PHP echo base_url();?>admin/forums/getForumById/' + id ,
        function(data){
            $.each(data,function(k,v){
                values.push(v);
            });
            alert(values[1]);
        }
    );
}

This works fine and alerts the desired value. But when i try to alert this after the loop, the values are lost and i get a undefined. Here is the case:

function populateValues(id) {
    var values=new Array();

    $.getJSON(
        '<?PHP echo base_url();?>admin/forums/getForumById/' + id ,
        function(data){
            $.each(data,function(k,v){
                values.push(v);
            });
        }
    );
    alert(values[1]);
}

Is it due to some closure construct forming? Or is it some fundamental concept i am lacking? Just curious to know why the values are not alerted even when i declared the array as global. Please shed some light.

But when i try to alert this after the loop Your alert is outside the loop in both examples. The only difference is that example 1 is inside the get and example 2 is outside it, hence the asynchronicity issue. — Nope
– Nope, Commented Dec 28, 2012 at 15:45
@FrançoisWahl Correct! Sorry by loop i meant the ajax construct. — beNerd
– beNerd, Commented Dec 28, 2012 at 15:48

Justin Niessner · Accepted Answer · 2012-12-28 15:38:16Z

15

The problem isn't scope.

The problem is that you're making an AJAX call and then immediately continuing to the next statement before the AJAX call completes.

Therefore, you alert(values[1]); before the array is filled from the AJAX call.

answered Dec 28, 2012 at 15:38

Justin Niessner

246k40 gold badges416 silver badges546 bronze badges

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

1 Comment

beNerd Over a year ago

so its something due to non-blocking nature of js :) Thanks a ton. Perfect answer.

Derek · Accepted Answer · 2012-12-28 15:42:18Z

3

This will fix it, using the Promise object returned by the AJAX call:

function populateValues(id)
{
    var values=new Array();

    $.getJSON('<?PHP echo base_url();?>admin/forums/getForumById/'+id,function(data){
        $.each(data,function(k,v) {
            values.push(v);
        });
    }).done(function() { alert(values[1]); });
}

answered Dec 28, 2012 at 15:42

Derek

4,7513 gold badges25 silver badges41 bronze badges

1 Comment

mplungjan Over a year ago

Would the alert not always work just fine immediately after the each function? Like in ops first example

Collectives™ on Stack Overflow

Confusion in variable scope in javascript

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related