Application météo avec plusieurs emplacements dans JavaScript/jQuery

Question

Je suis nouveau ici et je suis un débutant en programmation.
J'ai besoin d'aide avec mon application météo. J'utilise l'api metaweather pour afficher la météo, mais j'ai besoin d'afficher la météo pour plusieurs endroits. Voici comment j'affiche la météo pour une seule ville, mais je ne sais pas comment passer plus de villes ?!
Aidez s'il vous plaît!

Voici son 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> 

Et voilà 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

Au lieu de hardcoding 'varsovie' passer l'emplacement à la fonction

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

    }); 
}); 
}; 

Puis au lieu de drawWeather(); exécutez le fonction en utilisant drawWeather('warsaw');, drawWeather('berlin');, ...