Не могу получить правильное возвращаемое значение из моего вызова API

Question

Я использую API http://ip-api.com/json, и я пытаюсь получить объект, который будет содержать город и страну. Это мой код.

$(document).ready(function() { 

var locationAPI = "http://ip-api.com/json"; 
var K, C, F; 


var Person = { 
    city: function() { 
     $.getJSON(locationAPI, function(data) { 
      return data.city; 
     }); 
    }, 
    country: function() { 
     $.getJSON(locationAPI, function(data) { 
      return data.countryCode; 
     }); 
    } 
}; 

var x = Person.city; 
console.log(x); }); 

Это выход:

function() { 
     $.getJSON(locationAPI, function(data) { 
      return data.city; 
     }); 
    } 

я хочу, чтобы вывести значение напр. - Person.country = USA Что я делаю неправильно?

Answer 1

Ваша проблема вы думаете .getJSON это простая функция, но ее нет, ее функция обещание, у вас есть 2 способа получить данные, или в функции обратного вызова, как это:

$(document).ready(function() { 

var locationAPI = "http://ip-api.com/json"; 
var K, C, F; 
var Person; 

$.getJSON(locationAPI, function(data) { 
    Person = { 
    city: data.city, 
    country: data.country 
    }; 

    var x = Person.city; 
    console.log(x); }); 

}); 

или что вы также можете сделать это в обещании, как это:

var theCall = $.getJSON(locationAPI); 

theCall.done(function(data) {...}) 

вы пользователь .ajax() и установить асинхронной ложь, это будет сделать код ждать Аякса до конца и только затем продолжить (продолжение только после того, как вы установите свою переменную)

НО это не очень хороший способ сделать это, так как он блокирует браузер для ожидания вызова, и для этого может потребоваться несколько секунд!

$.ajax({ 
    url: myUrl, 
    dataType: 'json', 
    async: false, 
    success: function(data) { 
    //stuff 
    //... 
    } 
}); 

вы можете узнать больше из докторов Аякса, или из этого Is it possible to set async:false to $.getJSON call