Comment extraire les infos sur la température? Open Weather Map API

Question

Salut, J'ai reçu ce code et j'essaie d'en tirer parti. J'utilise Open Weather Map API. En ce moment je découvre juste quel temps il fait.

Mais je veux aussi connaître la température et l'afficher!

function getLocation() { 
    var location = document.getElementById("location").value; 
    location = location.replace(" ", "%20"); 

    if (location == "") { 
     document.getElementById("location").classList.add("error"); 
    } else { 
     document.getElementById("location").classList.remove("error"); 
     getWeather(location); 
    } 
} 

function getWeather(location) { 
    var ajax = new XMLHttpRequest(); 
    var json; 
    var apiKEY = "****dd982d18c618"; 
    var url = "http://api.openweathermap.org/data/2.5/weather?q=" + location + " ,uk&appid=" + apiKEY; 

    ajax.open("GET", url, true); 
    ajax.send(); 
    ajax.onreadystatechange = function() { 
     if (ajax.readyState == 4 && ajax.status == 200) { 
      json = JSON.parse(ajax.responseText); 
      document.getElementById("locationForm").style.display = "none"; 
      document.getElementById("weather").style.display = "block"; 
      if (json != undefined) { 
       var weather = json.weather[0].main 
       setIconAndDescription(weather, location) 
      } else { 
       description = "Oops, I couldn't find the weather in " + location; 
       document.getElementById("description").innerHTML = description; 
      } 
     } 
    } 
} 

function setIconAndDescription(weather, location) { 
    var icon; 
    var description; 
    weather = weather.toLowerCase(); 

    if (weather == "clear sky" || weather == "clear") { 
     icon = "clear.svg"; 
     description = "Yay, sunshine!"; 
     document.body.style.backgroundColor = "#FA6144"; 
     document.getElementById("icon").style.backgroundColor = "#7A2F21"; 
     document.getElementById("temp").style.backgroundColor = "#7A2F21"; 
     document.getElementById("description").style.backgroundColor = "#E0563D"; 
    } else if (weather == "few clouds") { 
     icon = "few-clouds.svg"; 
     description = "It's a little cloudy."; 
     document.body.style.backgroundColor = "#FA6144"; 
     document.getElementById("icon").style.backgroundColor = "#7A2F21"; 
     document.getElementById("temp").style.backgroundColor = "#7A2F21"; 
     document.getElementById("description").style.backgroundColor = "#E0563D"; 
    } else if (weather == "scattered clouds" || weather == "broken clouds" || weather == "clouds") { 
     icon = "clouds.svg"; 
     description = "Looks like scattered clouds today."; 
     document.body.style.backgroundColor = "#FA6144"; 
     document.getElementById("icon").style.backgroundColor = "#7A2F21"; 
     document.getElementById("temp").style.backgroundColor = "#7A2F21"; 
     document.getElementById("description").style.backgroundColor = "#E0563D"; 
    } else if (weather == "rain" || weather == "light rain" || weather == "shower rain") { 
     icon = "rain.svg"; 
     description = "Looks like rain." 
     document.body.style.backgroundColor = "#FA6144"; 
     document.getElementById("icon").style.backgroundColor = "#7A2F21"; 
     document.getElementById("temp").style.backgroundColor = "#7A2F21"; 
     document.getElementById("description").style.backgroundColor = "#E0563D"; 
    } else if (weather == "thunderstorm") { 
     icon = "thunder.svg"; 
     description = "Yikes, looks like a storm's brewing!" 
     document.body.style.backgroundColor = ","; 
     document.getElementById("icon").style.backgroundColor = "#7A2F21"; 
     document.getElementById("temp").style.backgroundColor = "#7A2F21"; 
     document.getElementById("description").style.backgroundColor = "#E0563D"; 
    } else if (weather == "snow") { 
     icon = "snow.svg"; 
     description = "Wrap up, it's going to snow!" 
    } else if (weather == "mist") { 
     icon = "mist.svg"; 
     description = "Looks a little misty today."; 
    } else { 
     icon = "default.svg"; 
     description = "Oops, I couldn't find the weather in " + location; 
    } 

    document.getElementById("weatherIcon").src = "images/" + icon; 
    document.getElementById("description").innerHTML = description; 
} 

(function() { 
    document.getElementById("btnGo").onclick = getLocation; 
    document.getElementById("location").onkeypress = function (key) { 
     if (key.keyCode == "13") { 
      getLocation(); 
     } 
    }; 
    // //Convert temp from kelvin to celsius: 
    // var tempCelsius = Math.round(((data.main.temp) - 273.15)); 
    // 
    // $("#temp").html(tempCelsius + "C"); 
    // 
    // }); 
})(); 

Le fond est ce que j'ai trouvé en cherchant et en essayant de comprendre comment d'autres personnes l'ont fait.

//Convert temp from kelvin to celsius: 
      // var tempCelsius = Math.round(((data.main.temp) - 273.15)); 
       // 
      // $("#temp").html(tempCelsius + "C"); 
       // 
      // }); 

Avec cela, jusqu'à présent, cela ne fonctionne pas. J'ai essayé d'autres versions qui permettent le reste de la date trop de travail. Bien que faisant ainsi les données ne montrent pas dans la div assignée.

Un dernier coup d'oeil. Je me sens comme il pourrait avoir besoin d'être dans une fonction?

Toute aide serait grande,

grâce,

Zack

Modifier

C'est ce que je l'ai fait, mais il ne fonctionne toujours pas. Est-ce qu'il doit y avoir une fonction pour que cela fonctionne?

Comme la première ligne définit "température" comme les données du json.

Ensuite, la deuxième ligne effectue la conversion.

Alors le troisième met tout cela ensemble. J'espère que l'intérieur de la div "temp"

// var temperature = json.main.temp; 
     // 
     //  temperature = Math.round(((data.main.temp) - 273.15)); 
     // 
     //  $("#temp").html(temperature + "C"); 
     // 
     // }); 
})(); 

Dois-je consigner la console à la place?

grâce,

Zack

Answer 1

En raison de noël ... :)

Remplacer la fonction

function setIconAndDescription(weather, location) { 
    // ... 
} 

avec celui-ci

function showWeatherInfo(weatherInfo) { 
    var weather = weatherInfo.weather[0].main.toLowerCase(), 
     temperature = weatherInfo.main.temp; 

    document.body.style.backgroundColor = "#FA6144"; 
    document.getElementById("icon").style.backgroundColor = "#7A2F21"; 
    document.getElementById("temp").style.backgroundColor = "#7A2F21"; 
    document.getElementById("description").style.backgroundColor = "#E0563D"; 

    if (weather == "clear sky" || weather == "clear") { 
     icon = "clear.svg"; 
     description = "Yay, sunshine!"; 
    } else if (weather == "few clouds") { 
     icon = "few-clouds.svg"; 
     description = "It's a little cloudy."; 
    } else if (weather == "scattered clouds" || weather == "broken clouds" || weather == "clouds") { 
     icon = "clouds.svg"; 
     description = "Looks like scattered clouds today."; 
    } else if (weather == "rain" || weather == "light rain" || weather == "shower rain") { 
     icon = "rain.svg"; 
     description = "Looks like rain." 
    } else if (weather == "thunderstorm") { 
     icon = "thunder.svg"; 
     description = "Yikes, looks like a storm's brewing!" 
    } else if (weather == "snow") { 
     icon = "snow.svg"; 
     description = "Wrap up, it's going to snow!" 
    } else if (weather == "mist") { 
     icon = "mist.svg"; 
     description = "Looks a little misty today."; 
    } else { 
     icon = "default.svg"; 
     description = "Oops, I couldn't find the weather in " + location; 
    } 

    document.getElementById("weatherIcon").src = "images/" + icon; 
    document.getElementById("description").innerHTML = description; 
    document.getElementById("temp").textContent = temperature + " K"; /*kelvin, for celsius: (temperature - 273.15) + " °C"*/ 
} 

La dernière ligne est pour la température. (je l'ai aussi restructurés le code un peu)

ensuite remplacer ce bloc if dans le gestionnaire onreadystatechange

if (json != undefined) { 
    var weather = json.weather[0].main 
    setIconAndDescription(weather, location) 
} 

avec ce

if (json != undefined) { 
    showWeatherInfo(json) 
} 

appeler la nouvelle fonction qui passe dans la informations météorologiques complètes d'openweathermap.