到innerHTML的API数据导致未定义

Question

我只是在学习JavaScript和API。此返回的数组中有六个名称。

var req = new XMLHttpRequest();
req.open("GET", "https://reqres.in/api/users?page=2");
req.onload = function(){
var resp = req.response;
var parsedResponse = JSON.parse(resp);
console.log(parsedResponse);


for(item in parsedResponse){
var newElement = document.createElement("li");
var name = parsedResponse[item].first_name;
newElement.innerHTML = name;
document.body.appendChild(newElement);
}//end for
}//end onload
req.send();

这导致：

• 未定义
• 未定义的
• 未定义的
• 未定义的
• 未定义的
• 未定义的

如有任何帮助，我们将不胜感激。

parsedResponse看起来像这个

它不是字符串数组。它们是具有多个字段的对象。first_name就是其中之一。

Answer 1

您可以从array.length中对其进行计数，并将其等于i变量，如

req.open("GET", "https://reqres.in/api/users?page=2");
req.onload = function(){
var resp = req.response, 
parsedResponse = JSON.parse(resp),
obj_lenght = parsedResponse.data.length, 
i;

for(i=0;i<obj_lenght; i++){
var newElement = document.createElement("li");
var name = parsedResponse.data[i].first_name;
newElement.innerHTML = name;
document.body.appendChild(newElement);
}//end for
}//end onload
req.send();

Answer 2

根据您的解析，响应有一个data属性，它是一个名称数组。

此外，使用of而不是in来迭代项，而不是数组索引

只需迭代此数组：

for (item of parsedResponse.data) {
var newElement = document.createElement("li");
var name = parsedResponse[item].first_name;
newElement.innerHTML = name;
document.body.appendChild(newElement);
}