は私がopenweathermap APIを使用して地元の天気予報を表示するWebアプリケーションを作成するつもりですopenweathermap API

Question

を使って地元の天気予報を表示します。 ボタンをクリックすると、私の位置（経度と緯度）の座標を取得するためにIP APIが呼び出されました。これらの情報はAPIキー（私はopenweathermap.orgのウェブサイトに登録されています）で使用され、APIdocsに従って天気情報を呼び出すためのURLを作成し、サーバーから取得したデータでHTML要素を変更します。私はこれをやってon codepen。私は最も単純なものをしようとしましたが、うまくいきません。

<h1>weather forcast</h1> 
<button id="btn">view</button> 
<p id ="test">change me</p> 
<p id ="place">place</p> 
<p id ="temp">temperature</p> 
<p id ="description">description</p> 

var getLocation = function(data) { 
    var lat = data.lat; 
    var lon = data.lon; 
    var apiKey = "[APIKEY]"; 
}; 

var url = 'http://api.openweathermap.org/data/2.5/weather?' + 'lat=' + lat  + '&lon=' + lon + '&appid=' + apiKey; 
//call back function to extract weather info. 
var getWeather = function(data) { 
    var temp = data.main.temp; 
    var description = data.weather[0].description; 
    var place = data.name; 
}; 
$(document).ready(function() { 
    $("#btn").click(function() { 
     $.getJSON('http://ip-api.com/json', getLocation, 'jsonp') 
     $.getJSON(url, getWeather, 'jsonp'); 
     $("#test").text("I AM CHANGED. THANKS!") 
     $("#temp").text(temp) 
     $("#description").text(description) 
     $("#place").text(place) 
    }) 
}) 

Answer 1

あなたはいくつかの問題があります。最初は$.getJSON呼び出しは非同期であるということですので、すべての要求が完了する前に、要素のtext()が変更されます。要求から返された値に応じてすべてのコードをコールバック関数に配置する必要があります。

第二に、あなたが関数内であなたの変数を定義し、その後、彼らはundefinedされる場所の外にそれらを使用しようとしている変数のスコープの問題を持っています。それと

は、あなたがこのような何かにあなたのロジックを再配置する必要がある、と述べた：関数呼び出しがイベントから連鎖されていることを

が

var getWeather = function(data) { 
    $.getJSON('http://api.openweathermap.org/data/2.5/weather', { 
     lat: data.lat, 
     lon: data.lon, 
     appid: "[APIKEY HERE]" 
    }, showWeather, 'jsonp'); 
}; 

var showWeather = function(data) { 
    $("#test").text("I AM CHANGED. THANKS!") 
    $("#temp").text(data.main.temp) 
    $("#description").text(data.weather[0].description) 
    $("#place").text(data.name) 
}; 

$(document).ready(function() { 
    $("#btn").click(function() { 
     $.getJSON('http://ip-api.com/json', getWeather) 
    }) 
}) 

注（すなわちclickは呼び出す場所AJAX要求を、作りますまた、変数がローカルと、独自の機能の範囲内で使用しているかに注意し、その後showWeatherを呼び出します。。

最後に、あなたはAJAX要求に対する正しいデータ・フォーマットを使用していることを確認してください。ip-api.com/jsonはJSONを返している、いない。