Question

我想列出当前天气数据（开放天气图）的数据响应。我使用ajax xhttp请求。我for循环和一个称为output的变量，用于放置来自for循环的数据。我没有在输出变量中得到任何数据。

我尝试用console.log来分析数据。我得到一些结果。因此api有效，只有for循环不起作用。

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
    let output = "";
    var data = JSON.parse(this.response);
    console.log(data);

   for(var i = 0; i < data.length; i++){
    output += '<li>' + data[i] + '</li>';
   }
   console.log(output);
   document.getElementById('list').innerHTML = output;
}
};
xhttp.open("GET", "http://api.openweathermap.org/data/2.5/weather? 
q=London&appid=befb83bbddacf33f9ecfc1a5125d7201", true);
xhttp.send();

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Weather api</title>
</head>
<body>
<ul id="list">

</ul>
<script src="app.js"></script>
</body>
</html>

Answer 1

API返回格式为

的对象

{"coord":{"lon":-0.13,"lat":51.51},"weather":anArray}

由于对象没有length属性，因此循环将永远不会执行。

大概是您要遍历.weather属性。试试这个：

if (this.readyState == 4 && this.status == 200) {
    let output = "";
    var data = JSON.parse(this.response).weather;
    console.log(data);

   for(var i = 0; i < data.length; i++){
    output += '<li>' + data[i] + '</li>';
   }
   console.log(output);
   document.getElementById('list').innerHTML = output;
}

编辑

连接对象和字符串会隐式调用该对象的toString方法，该方法返回[Object object]。您应该改为使用.description属性连接字符串。

尝试一下：

if (this.readyState == 4 && this.status == 200) {
    let output = "";
    var data = JSON.parse(this.response).weather;
    console.log(data);

   for(var i = 0; i < data.length; i++){
    output += '<li>' + data[i].description + '</li>';
   }
   console.log(output);
   document.getElementById('list').innerHTML = output;
}

需要列出开放式天气地图中的数据

1 个答案: