Как отключить информацию о температуре Open Map Map API

Question

Привет, мне был дан этот код, и я стараюсь использовать его.

Я использую API открытой погоды. На данный момент я просто узнаю, что такое погода.

Но я также хочу узнать температуру и показать ее!

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"); 
    // 
    // }); 
})(); 

Дно - это то, что я придумал, пытаясь выяснить, как это сделали другие люди.

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

С этим он пока не работает. Я пробовал другие версии, которые позволяют остальной части даты работать. Хотя это делается так, данные не отображаются в назначенном div.

Последний взгляд на него. Я чувствую, что, возможно, это должно быть внутри функции?

Любая помощь будет большим,

спасибо,

Zack

Редактировать

Это то, что я сделал, но он по-прежнему не работает. Должна ли быть функция для работы?

Как первая строка устанавливает «температуру» как данные из json.

Затем вторая строка преобразует.

Затем третий ставит все это вместе. Я надеюсь, что внутри div «temp»

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

Должен ли я быть консольным протоколированием вместо этого?

спасибо,

Zack

Answer 1

Из-за Рождества ... :)

Заменить функцию

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

с этим одним

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"*/ 
} 

Последняя строкадля температуры. (я также перестроена код немного)

Затем замените этот if блок в onreadystatechange обработчика

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

с этим

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

вызвать новую функцию Передает полная информация о погоде от openweathermap.