CODEWITHSUNDEEP
javascriptvariablesdomglobal-variables
Ricky Yoder
Ricky Yoder

Reputation: 571

Global JSON Variable

If you view the source of what I have so far by clicking on the link below, you'll see the problem I'm having.

My console on Chrome says that the object, "pikachu" exists, because when I alert it in the console, it returns with "Object object". I can also stringify it via the console with JSON.stringify().

Why isn't it global in function main() itself, but everywhere else it is???

Raise a Pikachu

function ChangeName(){
    var n=prompt("What would you like to rename your Pikachu?",""+pikachu.pikaname+"");
    pikachu.pikaname=n;
}

function main(){
    try{
        ajaxObj=new XMLHttpRequest();
        pikaname=document.getElementById("pikaname");
        age=document.getElementById("age");pikachu="";
        ajaxObj.onreadystatechange=function(){
            if(ajaxObj.readyState>=4&&ajaxObj.status==200){
                pikachu=JSON.parse(ajaxObj.responseText);
            }
        }
        ajaxObj.open("GET","players/Ricky.json",true);
        ajaxObj.send();
        pikaname.value=pikachu.pikaname;
    }
    catch(e){
        alert(e);
    }
}

Upvotes: 2

Views: 5714

Answers (2)

Michael Berkowski
Michael Berkowski

Reputation: 270617

The AJAX call runs asynchronously. At the time the line pikaname.value = pikachu.pikaname; executes, the JSON is not actually available yet. Instead, you need to set that inside the onreadystatechange event:

    ajaxObj.onreadystatechange=function(){
        if(ajaxObj.readyState>=4&&ajaxObj.status==200){
            pikachu=JSON.parse(ajaxObj.responseText);
            // Set the value in the onreadystatechange...
            pikaname.value = pikachu.pikaname;
        }
    }

Now, I will also point out that you should probably not be depending on pikaname as a global defined without var. Instead, define it with var outisde any function, or retrieve it and define it with var inside the functions that use it.

// Define at global scope
var pikachu;
function ChangeName(){
    var n=prompt("What would you like to rename your Pikachu?",""+pikachu.pikaname+"");
    pikachu.pikaname=n;
}

function main(){
    try{
        // Define with var in this function
        var ajaxObj=new XMLHttpRequest();
        var pikaname=document.getElementById("pikaname");
        var age=document.getElementById("age");
        pikachu="";

        ajaxObj.onreadystatechange=function(){
            if(ajaxObj.readyState>=4&&ajaxObj.status==200){
                pikachu=JSON.parse(ajaxObj.responseText);
            }
        }
        ajaxObj.open("GET","players/Ricky.json",true);
        ajaxObj.send();
        pikaname.value=pikachu.pikaname;
    }
    catch(e){
        alert(e);
    }
}

Upvotes: 3

Trott
Trott

Reputation: 70075

Your problem would seem to be here:

   age=document.getElementById("age");pikachu="";
    ajaxObj.onreadystatechange=function(){
        if(ajaxObj.readyState>=4&&ajaxObj.status==200){
            pikachu=JSON.parse(ajaxObj.responseText);
        }
    }
    ajaxObj.open("GET","players/Ricky.json",true);
    ajaxObj.send();
    pikaname.value=pikachu.pikaname;

The first line assigns an empty string to pikachu. (I wouldn't put multiple assignments on a line like that, by the way.)

A few lines later, you're assigning pikachu a value again via an asynchronous call. But it's asynchronous. So there's no guarantee that assignment will have happened when you get to the last line where you are expecting pikachu to be an object with a pikaname property.

Chances are at that point either pikachu is still an empty string.

Upvotes: 0

Related Questions