Global variable in a JQuery function?

Global variable in a JQuery function?
0.0 0

#1

Hello everyone ! I was working on a local weather app, and I stumbled uppon a problem I cannot solve ! I’ve been scratching my head for an hour without being able to figure out what’s going on.

So, I’m calling a Jquery function to set a few variable but , even when I try to set those variable as global by not putting the famous ‘var’ beofre declaring them, I cannot use them outside the Jquery function.

Here is the code :

var country;
function getCountry(){
$.ajax({ 
        dataType: "json",
        contentType: "application/json",
        type : "GET",
        url: "https://fcc-weather-api.glitch.me//api/current?",
        data : {
          lat:"48.8566",
          lon:"2.3522",      
        },
        success : function(quote){
 var temperature = quote.main.temp;
 var wind = quote.wind.speed;
 var pressure = quote.main.pressure;
 var humidity = quote.main.humidity;
 country = quote.sys.country;
 document.getElementById("wind").innerHTML = wind;
 document.getElementById("temperature").innerHTML = temperature;
 document.getElementById("pressure").innerHTML = pressure;
 document.getElementById("humidity").innerHTML = humidity;
 document.getElementById("country").innerHTML = country;



        },
        error : document.getElementById("temperature").innerHTML = "error" 
  
});
}

$(document).ready(function(){
  getCountry();
  document.getElementById("countryimg").src = "http://www.geognos.com/api/en/countries/flag/" + country + ".png" ;
});

As you can see, i’m trying to use the variable ‘country’ to get a picture of the country flag, but nothing to do, the variable doesn’t seem to work outside the AJAX function. Does anyone have any idea why it’s not working ? Thanks a lot !


#2

The $.ajax function is asynchronous, so your code calls getCountry which contains the $.ajax call, $.ajax does not put the rest of your code after the call to it on hold until the response comes back, so when you write the following:

document.getElementById("countryimg").src = "http://www.geognos.com/api/en/countries/flag/" + country + ".png" ;

the country variable only gets assigned a value other than the default undefined value it already has inside the callback function of the $.ajax call. However, since this line of code does not wait for the callback function to execute (the asynchronous part), any reference to country returns undefined, which is why you end up of a src attribute equal to “https://www.geognos.com/api/en/countries/flag/undefined.png

If you want to reference anything that comes back as a response from the API, you need to do it inside the callback function, so just move that line inside the callback function.


#3

@rendelldawson

Yes , I figured I could simply put the line inside the AJAX call, but since i’m the kind of people that cannot let a question unawnsered, I was wondering if there was any way to set a variable inside an ajax function, is there a way to tell the code to wait for the callback before reading the function ?

Thanks for yhe awnser anyway!


#4

Do a search on Promises in the forum or on Google. Below is a post about Promises.