Wetter-App mit mehreren Standorten in JavaScript/jQuery

Question

Ich bin neu hier und ich bin ein Anfänger in der Programmierung.
Ich brauche Hilfe mit meiner Wetter App. Ich benutze Metaweather API für die Anzeige von Wetter, aber ich muss Wetter für mehrere Standorte anzeigen. So zeige ich das Wetter nur für eine Stadt an, aber ich weiß nicht, wie man noch mehr Städte passieren kann ?!
Bitte helfen!

Hier ist es Code (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> 

Und hier ist es 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

statt Hardcoding 'warschau' den Standort an die Funktion übergeben

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 + '>'); 

    }); 
}); 
}; 

Dann statt drawWeather(); laufen lassen Funktion mit drawWeather('warsaw');, drawWeather('berlin');, ...