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.

Answer 1

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.

Answer 2

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
 });

Answer 3

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();

Answer 4

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();