How to make a variable accessible outside a function

Question

I am fetching data from a json file using   getJSON to get an id of a character and then use   getJSON to fetch it from another page using the id that I go previously   However  in the console it says      https   prod api pvp net api lol eune v1 2 stats by-summoner undefined summary api key API KEY HERE   It should show the id where it says unidentified -  by-summoner undefined summary   This is my current script   var input    netuetamundis    var sID     document  ready function             get json from this page to get the ID of the input       getJSON  https   prod api pvp net api lol eune v1 1 summoner by-name     input     api key API KEY HERE   function  name            obj   name          sID   obj id          console log sID                 getJSON  https   prod api pvp net api lol eune v1 2 stats by-summoner     sID     summary api key API KEY HERE   function  stats            console log stats                 When I googled  it said to declare the variable outside the function  which I did as you can see in the code  however it still doesn t work

User · Accepted Answer

Your variable declarations and their scope are correct. The problem you are facing is that the first AJAX request may take a little bit time to finish. Therefore, the second URL will be filled with the value of sID before the its content has been set. You have to remember that AJAX request are normally asynchronous, i.e. the code execution goes on while the data is being fetched in the background.

You have to nest the requests:

$.getJSON("https://prod.api.pvp.net/api/lol/eune/v1.1/summoner/by-name/"+input+"?api_key=API_KEY_HERE"  , function(name){   obj = name;   // sID is only now available!   sID = obj.id;   console.log(sID); });

Clean up your code!

Put the second request into a function
and let it accept sID as a parameter, so you don't have to declare it globally anymore! (Global variables are almost always evil!)
Remove sID and obj variables - name.id is sufficient unless you really need the other variables outside the function.

$.getJSON("https://prod.api.pvp.net/api/lol/eune/v1.1/summoner/by-name/"+input+"?api_key=API_KEY_HERE"  , function(name){   // We don't need sID or obj here - name.id is sufficient   console.log(name.id);    doSecondRequest(name.id); });  /// TODO Choose a better name function doSecondRequest(sID) {   $.getJSON("https://prod.api.pvp.net/api/lol/eune/v1.2/stats/by-summoner/" + sID + "/summary?api_key=API_KEY_HERE", function(stats){         console.log(stats);   }); }

Hapy New Year :)

User · Answer

getJSON is an asynchronous request  meaning the code will continue to run even though the request is not yet done  You should trigger the second request when the first one is done  one of the choices you seen already in ComFreek s answer   Alternatively you could use jQuery s   when  then    similar to this   var input    netuetamundis    var sID     document  ready function            when   getJSON  https   prod api pvp net api lol eune v1 1 summoner by-name     input     api key API KEY HERE   function              obj   name          sID   obj id          console log sID           then function                getJSON  https   prod api pvp net api lol eune v1 2 stats by-summoner     sID     summary api key API KEY HERE   function  stats                console log stats                             This would be more open for future modification and separates out the responsibility for the first call to know about the second call   The first call can simply complete and do it s own thing not having to be aware of any other logic you may want to add  leaving the coupling of the logic separated

[javascript] How to make a variable accessible outside a function?

Examples related to javascript

Examples related to jquery