Question

我试图使用SWAPI，我试图了解地球的气候，但我得到了＃34;未定义＆＃34;

基本上我想要的气氛是＆＃34;干旱＆＃34;不是＆＃34;未定义＆＃34;。

也许＆＃34; xhttp.response.climate＆＃34; 不是正确的方法。但是怎么样？

这是我的代码：

xhttp.onreadystatechange = function() {

if(xhttp.readyState == 4 && xhttp.status == 200) {
   console.log(JSON.parse(xhttp.response));
   document.write('The climate of the planet is: ' + 
   '<strong>' + xhttp.response.climate + '</strong>');
 }
}

 xhttp.open("GET", "http://swapi.co/api/planets/1/", true);

 xhttp.send();

我是浏览器我明白了：

The climate of the planet is: undefined

这就是我在DEVTOOLS中看到的：

Object {name: "Tatooine", rotation_period: "23", orbital_period: "304", 
diameter: "10465", climate: "arid"…}
climate:"arid"
created:"2014-12-09T13:50:49.641000Z"
diameter:"10465"
edited:"2014-12-21T20:48:04.175778Z"
films: Array(5)
gravity:"1 standard"
name: "Tatooine"
orbital_period:"304"
population: "200000"
residents: Array(10)
rotation_period: "23"
surface_water: "1" 
terrain: "desert"
url: "http://swapi.co/api/planets/1/"
__proto__: Object

Answer 1

在此行中，您将字符串解析为对象：

console.log(JSON.parse(xhttp.response));

这会从字符串中创建一个新对象，但不会重新分配xhttp.response的值。

这意味着xhttp.response.climate无效，因为xhttp.response仍然是一个字符串，所以这不起作用：

document.write('The climate of the planet is: ' + 
'<strong>' + xhttp.response.climate + '</strong>');

请改为尝试：

var data = JSON.parse(xhttp.response);
console.log(data);
document.write('The climate of the planet is: ' + 
'<strong>' + data.climate + '</strong>');

Answer 2

响应包含JSON字符串对象。你正确记录了这个：

console.log(JSON.parse(xhttp.response));

要修复document.write部分，您需要将其更改为：

document.write('The climate of the planet is: <strong>' + JSON.parse(xhttp.response).climate + '</strong>');

或者更好的是，将其捕获到var中以便于参考：

var planet = JSON.parse(xhttp.response);
console.log(planet.climate);

使用swapi与JavaScript AJAX

2 个答案: