Assigning ajax response to a variable?

Question

What am I doing wrong here?

var country = function () {
  var tmp = null;
  $.ajax({
    'async': false,
    'dataType': 'jsonp',
    'url': "http://ipinfo.io",
    'success': function (data) {
      tmp = data.country;
    }
  });
  return tmp;
}();

console.log(country);

prints null

async is set to false, so it should work? What is wrong here?

BTW if I put console.log(data.country) inside success call it prints the country correcty

Answer 1

async:false won't work with jsonp requests.

See the documentation for the async setting.

But really, you should avoid async:false anyway.

Answer 2

JavaScript is asynchronous. Your country method is returning tmp before the ajax call comes back successfully.

Look into promises or deferred objects.

var country = function () {
    return  $.ajax({
        'dataType': 'jsonp',
        'url': "http://ipinfo.io"
    });
}

country().done(function(data) {
   console.log(data);
})
.fail(function(){

});

Answer 3

var country = function () {
  var tmp = null;
  $.ajax({    
    dataType: 'json',
    url: "http://ipinfo.io",
    success: function (data) {
      tmp = data.country;
    },
    async: false    
  });
  return tmp;
}();