JQueryで配列要素を印刷するには？

Question

私は都市の天気詳細を取得するために次のコードを持っています。 私はページをロードするとき、URL getメソッドで特定の都市の正確な天気の詳細を提供しています。しかし、各結果の都市名は印刷できません。私の例では、常に「シドニー」と書かれています

結果を使って各都市名を印刷するにはどうすればよいですか？

コード：

x = window.location.search.substr(6); 
 
y = x.split("%2C"); 
 

 
$(document).ready(function() { 
 
    $('#b1').click(function() { 
 

 
    for (i = 0; i < y.length; i++) { 
 

 
     city = y[i]; 
 

 
     $.ajax({ 
 
     url: 'http://api.openweathermap.org/data/2.5/weather?q=' + city + 
 
      "&units=metric" + 
 
      "&appid=ace585585ed8eb42338b8e663fe0170e", 
 
     type: 'get', 
 
     dataType: 'jsonp', 
 
     success: function(data) { 
 
      var w = showd(data); 
 
      var para2 = $("<p></p>").text(city); 
 
      var para = $("<p></p>").text(w); 
 
      $("body").append(para2, para); 
 
     } 
 
     }); 
 

 
     function showd(data) { 
 
     return data.weather[0].description; 
 

 
     } 
 
    } 
 
    }); 
 
}); 
 

 
$(document).ready(function() { 
 
    document.getElementById("b1").click(); 
 
});

<Script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></Script> 
 

 
<button style="visibility:hidden;" id="b1">Click</button><br><br> 
 
<p id="data"></p> 
 
<p id="p2"></p>

URL：

file:///C:/wamp/www/aTravelz/checkweather.html?wthr=Moscow%2CLondon%2CColombo%2CSydney 

結果：

Sydney 

overcast clouds 

Sydney 

light intensity shower rain 

Sydney 

few clouds 

Sydney 

broken clouds 

Answer 1

あなたのコードが使用している都市の最後の値（for-loopが完了した後）AJAX応答が同じになるので、使用されます。あなたがに必要

は、各AJAX要求のためのcityの値をロック

(function(city){ $.ajax({ 
      //rest of the ajax code stays as is 
}))(city); 

として、またはデモに示すよう@xanderが（コメントに言ったようにあなたがlet代わりのvarを使用することができますウェル）

デモ

var arr = [ 1,2,3 ]; 
 
for(var counter = 0; counter < arr.length; counter++) 
 
{ 
 
    let c = arr[ counter ]; 
 
    setTimeout(function(){ 
 
     console.log(c) 
 
    }, 100); 
 
}