No access to global variable from inside a function? (javascript)

Question

This is not the first time I am working with ajax and such, I want to use the jQuery function $.getJSON

I have written the following:

var newIMG;

function random_img(){
    $.getJSON('content/random.php',function (data){
        newIMG = data;
    })      
    alert(newIMG.ERROR);
}

But for some reason I can't access the newIMG variable after the JSON request has been made. Passing it from the $.getJSON function to the random_img() function in some way would be fine as well (better, actually)

It's really strange and I can't figure out what's the problem here.

http://i.stack.imgur.com/OShao.jpg Screenshot of the firebug console, may explain it better.

Thanks in advance guys.

Answer 1

It's because you're trying to alert before the JSON request has come back (getJSON is asynchronous) so when it first attempts to alert it, it is undefined.

Move the alert into the callback as such:

$.getJSON('content/random.php',function (data){
  newIMG = data;
  alert(newIMG.ERROR);
});     

Answer 2

Your call to $.getJSON is asynchronous, which means that alert(newIMG.ERROR) will be evaluated before the Ajax call has returned a value. You need to place the alert call inside the callback:

var newIMG;

function random_img(){
  $.getJSON('content/random.php',function (data){
    newIMG = data;
    alert(newIMG.ERROR);
  });      
}