JavaScript/jQueryで複数の場所を持つ天気アプリ

Question

私はここで新しいです。私はプログラミングの初心者です。
私は天気アプリに助けが必要です。私は天気を表示するためにmetaweather APIを使用していますが、私は複数の場所の天気を表示する必要があります。 これは、1つの都市だけの天気を表示する方法ですが、より多くの都市を渡す方法はわかりません。
助けてください！

ここでは、コード（HTML）

<main> 
     <section> 
      <div class="container"> 
       <div id="main_panel"> 
       <div class="row"> 
        <div class="col-xs-12 col-sm-6 col-md-4"> 
         <div class="app"> 
          <img class="img-responsive img-rounded" src="images/warszawa.jpg" alt="Warszawa"> 
          <span id="warsaw"> 
          <span class="location"> 
          Unknown 
           <i class="fa fa-map-marker"></i> 
           <span class="today">Today</span> 
          </span> 
          </span> 
          <span class="weather"> 
           <span class="temperature"> 
            0<sup>&deg;</sup> 
            <span class="unit">c</span> 
           </span> 
           <span class="weather-icon"></span> 
           <h3 class="weather-state"></h3> 
          </span> 
         </div> 
        </div> 
        <div class="col-xs-12 col-sm-6 col-md-4"> 
         <div class="app"> 
          <img class="img-responsive img-rounded" src="images/berlin.jpg" alt="Berlin"> 
          <span id="berlin"> 
          <span class="location"> 
          Unknown 
           <i class="fa fa-map-marker"></i> 
           <span class="today">Today</span> 
          </span> 
          </span> 
          <span class="weather"> 
           <span class="temperature"> 
            0<sup>&deg;</sup> 
            <span class="unit">c</span> 
           </span> 
           <h3 class="weather-state"></h3> 
           <span class="weather-icon"></span> 
          </span> 
         </div> 
        </div> 
        <div class="col-xs-12 col-sm-6 col-md-4"> 
         <div class="app"> 
          <img class="img-responsive img-rounded" src="images/lizbona.jpg" alt="Lizbona"> 
          <span id="location"> 
          Unknown 
           <i class="fa fa-map-marker"></i> 
           <span class="today">Today</span> 
          </span> 
          <span class="weather"> 
           <span id="temperature"> 
            0<sup>&deg;</sup> 
            <span class="unit">c</span> 
           </span> 
           <h3 class="weather-state"></h3> 
           <span class="weather-icon"></span> 
          </span> 
         </div> 
        </div> 
       </div> 
      </div> 
     </section> 
    </main> 

だし、ここではJavaScriptを

var temperature = []; 

var cityName = 'warsaw'; 

var weatherSiteUrl = "http://cors-anywhere.herokuapp.com/https://www.metaweather.com/"; 
var weatherAPIUrl = weatherSiteUrl + "api/"; 
var cityLocation = weatherAPIUrl + "location/search/?query="; 
var iconUrl = "https://www.metaweather.com/"; 


function drawWeather() { 

$.getJSON(cityLocation + cityName, function(data) { 

    $.getJSON(weatherAPIUrl + 'location/' + data[0].woeid, function(data) { 
     $('.location').html(cityName + '<i class="fa fa-map-marker"></i>'); // Name of location 
     $('.weather-state').html(data.consolidated_weather[0].weather_state_name); //Weather state 
      temperature[0] = Math.floor(data.consolidated_weather[0].the_temp); 
     $('.temperature').html(temperature[0] + '<sup>&deg;</sup><span class="unit">c</span>'); // Temperature 
      var weatherImg = iconUrl + 'static/img/weather/' + data.consolidated_weather[0].weather_state_abbr + '.svg'; 
        $('.weather-icon').html('<img src=' + weatherImg + '>'); 

     }); 
    }); 
}; 

drawWeather(); 

Answer 1

代わりの 'ワルシャワは' 関数に

var temperature = []; 

var weatherSiteUrl = "http://cors-anywhere.herokuapp.com/https://www.metaweather.com/"; 
var weatherAPIUrl = weatherSiteUrl + "api/"; 
var cityLocation = weatherAPIUrl + "location/search/?query="; 
var iconUrl = "https://www.metaweather.com/"; 


function drawWeather(cityName) { 

$.getJSON(cityLocation + cityName, function(data) { 

    $.getJSON(weatherAPIUrl + 'location/' + data[0].woeid, function(data) { 
    $('.location').html(cityName + '<i class="fa fa-map-marker"></i>'); // Name of location 
    $('.weather-state').html(data.consolidated_weather[0].weather_state_name); //Weather state 
     temperature[0] = Math.floor(data.consolidated_weather[0].the_temp); 
    $('.temperature').html(temperature[0] + '<sup>&deg;</sup><span class="unit">c</span>'); // Temperature 
     var weatherImg = iconUrl + 'static/img/weather/' + data.consolidated_weather[0].weather_state_abbr + '.svg'; 
       $('.weather-icon').html('<img src=' + weatherImg + '>'); 

    }); 
}); 
}; 

を場所を渡すハードコーディングです次にdrawWeather();の代わりに関数drawWeather('warsaw');、drawWeather('berlin');、...