Calls are asynchronous and each call has to be chained one after the other. That is, you have to wait for your server request to be downloaded, otherwise your variables will not have anything assigned. Imagine that you want to withdraw money from your savings account and for that you go to the bank and forget your debit card, the bank can not solve your money request because you do not have the card, call home to get the happy card and when you have it, the bank takes care of you.
And you should consider separating your code. Sun Tzu already said it in the art of war
divide and conquer
$(function(){
var lat, lng, kTemp;
var ip = 'http://ip-api.com/json';
$.getJSON(ip, function(data){
getWeather(data);
});
function getWeather(data){
lat = data.lat;
lng = data.lon;
var api = 'http://api.openweathermap.org/data/2.5/weather?lat=' + lat + '&lon='+ lng + '&appid=XXXXxxxxxXXXXxXXXXXXxxx';
$.getJSON(api, function(dataFromAPI){
createView(dataFromAPI);
});
}
function createView(dataFromAPI){
var weatherType = dataFromAPI.weather[0].description;
var winSpeed = dataFromAPI.wind.speed;
var city = dataFromAPI.name;
kTemp = dataFromAPI.main.temp;
console.log(city);
console.log(api);
$("#city").html(city);
$("#weatherType").html(weatherType);
$("#winSpeed").html(winSpeed);
$("#kTemp").html(kTemp);
}
});