我正在使用 OpenWeatherMap API，但似乎无法弄清楚为什么我的一个字段显示为未定义。一切正常，除了当我尝试检索位于weather.description 的天气条件时，它返回未定义。所有其他变量都填写得很好。任何人都知道什么可能会阻止其正常工作？ 我的 JavaScript:
var request = new XMLHttpRequest();
function getWeather() {
var latitude = document.getElementById("lat").value;
var longitude = document.getElementById("long").value;
request.open('GET', 'https://api.openweathermap.org/data/2.5/weather?lat=' + latitude + '&lon=' + longitude + '&units=imperial&appid=547fa6dfa44cff13fa92bba2c465b366', true);
request.send();
request.onreadystatechange = displayData;
}
function displayData() {
if(request.readyState === 4 && request.status === 200) {
var resultData = JSON.parse(request.responseText);
var location = document.getElementById("location")
var temperature = document.getElementById("temperature");
var windspeed = document.getElementById("windspeed");
var condition = document.getElementById("condition");
location.value = resultData.name +", " + resultData.sys.country;
temperature.value = resultData.main.temp + " degrees Fahrenheit";
windspeed.value = resultData.wind.speed + " miles per hour";
condition.value = resultData.weather.description;
document.getElementById("resultset").style.visibility = "visible";
}
}
// Create an event handler for when the btn button is clicked
window.onload = function() {
var btn = document.getElementById("btn");
btn.addEventListener("click", getWeather, false);
}
我的 HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta id="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<header>
<h1>Weather Report</h1>
</header>
<article>
<h2>Weather Data</h2>
<table style="width:100%">
<tr>
<th><strong>City</strong></th>
<th><strong>Coordinates</strong></th>
</tr>
<tr>
<td>Batavia, OH, US</td>
<td>Latitude: 39.07859<br>
Longitude: -84.17941</td>
</tr>
<tr>
<td>Cincinnati, OH, US</td>
<td>Latitude: 39.10713<br>
Longitude: -84.50413</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
</table>
<form action="#" method="post" id="theForm" novalidate>
<fieldset id="coordinateset">
<label for="lat" id="latlabel">Latitude:</label>
<input id="lat" type="number" />
<label for="long" id="longlabel">Longitude:</label>
<input id="long" type="number" />
</fieldset><br><br>
<fieldset id="resultset">
<label for="location" id="locationlabel">Location:</label>
<input id="location" type="text" readonly />
<label for="temperature" id="temperaturelabel">Temperature:</label>
<input id="temperature" type="text" readonly />
<label for="windspeed" id="windspeedlabel">Wind Speed:</label>
<input id="windspeed" type="text" readonly />
<label for="condition" id="conditionlabel">Weather Condition:</label>
<input id="condition" type="text" readonly />
</fieldset>
</form>
<button id="btn">Submit Coordinates</button>
</article>
<script src="js/weather_report1.js"></script>
</body>
</html>
最佳答案
如果您看到 API at the OpenWeatherMap site ，我们看到 weather 属性是一个数组。要访问天气的描述，请尝试 weather[0].description，或者更好的是，循环遍历它并提取每个天气条件的描述(如果它适合您的用例)。
关于javascript - 尝试在 JavaScript 中检索 API，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53768992/