Javascript 如何从开放天气图API中提取温度信息

嗨，我已经得到了这个代码，我正在努力建立它

我正在使用开放天气图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中

最后看一眼。我觉得它可能需要在一个函数中

任何帮助都会很好

谢谢

扎克

编辑

这就是我所做的，但它仍然不起作用。它是否需要一个函数才能工作

因为第一行将“温度”设置为来自json的数据

然后第二行进行转换

然后第三个就把它们放在一起了。我希望里面有“临时工”

我应该改为用控制台记录吗

谢谢

扎克因为圣诞节…）

替换该函数

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

最后一行是温度。 （我还对代码进行了一些重构）

然后在

onreadystatechange

处理程序中替换此

if

块

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

用这个

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

---

调用新函数，从openweathermap传入完整的天气信息。

您可能不想在这里向星球广播API密钥。从console.log（json.weather）开始->

var temperature=json.main.temp@PaulAbbott Yea忘记了那个好捕获，谢谢：）@mplungjan-humm所以你说的是。。。我是否只需将其添加到代码中，它就会打印出api中的所有数据？因此，我需要更改它，以便它只记录临时。。log（json.weather.main.temp）。您的欢迎：-）圣诞快乐，为您和您的家人带来一些轻松的假期！
if (json != undefined) {
    showWeatherInfo(json)
}