How can I use a variable outside an API call function using Jquery or Javascript

Question

How can I use a variable that stores data from an API call outside its function. See snippet below to kinda get an idea as to what I mean:

var country;

function getLocation() {
    $.getJSON('https://ipinfo.io/json', function (data) {


console.log(" 1- Your country is " + data.country);

 country = (data.country);

         });
}

getLocation();

var continent;

switch(country){

  case "USA":
  case "Mexico":
  case "Canada":
  continent = "Your continent is X";
  break;
  case "Morocco":
  case "Egypt":
  case "South Africa":
  continent = "Your continent is Y";
  break;
  case "France":
  case "Spain":
  case "Germany":
  continent = "Your continent is Z";
  break;
  default:
  continent = "this is default text";

}

document.getElementById("myp").innerHTML = continent;

I would like to get the visitor's country and check if equals any of the predefined country, then tell display a paragraph telling him what continent he belongs to (just a sample text).

The issue is the variable country is always null once it is used outside of the get location function.

Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Muhammad Usman, May 15 '18 at 17:02

score 2 · Answer 1 · answered May 15 '18 at 17:13

you are doing asynchronous ajax call means other part of your function will run before your response come. that's why you are getting null in country variable. try to make your call synchronous like this :

jQuery.ajax({
  type: "POST",
  url: 'https://ipinfo.io/json',
  success: function (data) {
             console.log(" 1- Your country is " + data.country);
              country = (data.country);
   }, 
   async: false // <- this turns it into synchronous
 });

score 1 · Accepted Answer · answered May 15 '18 at 17:06

You can do like this:

function getLocation() {
    $.getJSON('https://ipinfo.io/json', function (data) {
      console.log(" 1- Your country is " + data.country);
      country = (data.country);
      updateCountry(country);
    });
}

function updateCountry(country){

  var continent;

  switch(country){

    case "USA":
    case "Mexico":
    case "Canada":
    continent = "Your continent is X";
    break;
    case "Morocco":
    case "Egypt":
    case "South Africa":
    continent = "Your continent is Y";
    break;
    case "France":
    case "Spain":
    case "Germany":
    continent = "Your continent is Z";
    break;
    default:
    continent = "this is default text";

  }

  document.getElementById("myp").innerHTML = continent;
}

getLocation();

the function updateCountry is called when the response arrives.

This works. This solution works and is clear as to how callbacks work in Jquery. — Zeusox, May 15 '18 at 17:25

score 0 · Answer 3 · answered May 15 '18 at 17:05

Try.

var country;

function getLocation() {
    $.getJSON('https://ipinfo.io/json', function(data) {


        console.log(" 1- Your country is " + data.country);

        country = (data.country);

        var continent;

        switch (country) {

            case "USA":
            case "Mexico":
            case "Canada":
                continent = "Your continent is X";
                break;
            case "Morocco":
            case "Egypt":
            case "South Africa":
                continent = "Your continent is Y";
                break;
            case "France":
            case "Spain":
            case "Germany":
                continent = "Your continent is Z";
                break;
            default:
                continent = "this is default text";

        }

        document.getElementById("myp").innerHTML = continent;

    });
}

getLocation();

score 0 · Answer 4 · answered May 15 '18 at 17:05

Set the inner HTML inside the callback function:

function getContinent(country) {
  switch(country){
    case "USA":
    case "Mexico":
    case "Canada":
      return "Your continent is X";      
    case "Morocco":
    case "Egypt":
    case "South Africa":
     return "Your continent is Y";  
    case "France":
    case "Spain":
    case "Germany":
    return "Your continent is Z";  
    default:
    return "this is default text";
  }
}

function setContinent() {
  $.getJSON('https://ipinfo.io/json', function(data) {
    document.getElementById("myp").innerHTML = getContinent(data.country);
  }
}

setContinent();

How can I use a variable outside an API call function using Jquery or Javascript

4 Answers4