获取 API "Cannot read property 'forEach' of undefined"

Question

我正在尝试使用Pixabay API拉入图像。我有一个输入字段，我正在获取该值并将其插入 url 字符串中。我能够拉回来，我成功地得到了回复。当我尝试遍历数组并拉入图像时，它说"无法读取未定义的属性'forEach'"。我不确定发生了什么？这是我的代码：

const imgForm = document.querySelector("#search-form");
imgForm.addEventListener("submit", fetchImages);
function fetchImages(e) {
e.preventDefault();
const searchTerm = document.querySelector(".search").value;
fetch(`https://pixabay.com/api/?key=8772164-4f816aa8fc1fc3045290454a0&q=${searchTerm}&image_type=photo&pretty=true`)
.then((response) => {return response.json(); })
.then((resp => {
console.log(resp);
let hitsArray = resp.data;
showImages(hitsArray);
}))
.catch(err => console.log(err));
}
function showImages(hitsArray) {
const results = document.querySelector(".results");
console.log(results);

let output = '<div class="container">';
hitsArray.forEach((imgData) => {
output += `
<div class="col-4">
<img src="${imgData.hits.largeImageURL}"/>
</div>
`;
});
document.querySelector('.results').innerHTML = output;
}

<form id="search-form">
<input type="text" class="search">
<input type="submit" value="Submit">
</form>
<div class="results"></div>

这是我正在制作的实际演示： https://codepen.io/Brushel/pen/KeOLRg?editors=1010

Answer 1

响应没有data属性 - 相反，它具有包含您要查找的数组的hits属性。另一个问题是传递给forEach的函数的参数是正在迭代的数组元素 - 而不是

imgData.hits.largeImageURL

只需访问largeImageURL属性：

imgData.largeImageURL

const imgForm = document.querySelector("#search-form");
imgForm.addEventListener("submit", fetchImages);
function fetchImages(e) {
e.preventDefault();
const searchTerm = document.querySelector(".search").value;
fetch(`https://pixabay.com/api/?key=8772164-4f816aa8fc1fc3045290454a0&q=${searchTerm}&image_type=photo&pretty=true`)
.then((response) => {
return response.json();
})
.then((resp => {
let hitsArray = resp.hits;
showImages(hitsArray);
}))
.catch(err => console.log('err:' + err));
}
function showImages(hitsArray) {
const results = document.querySelector(".results");
let output = '<div class="container">';
hitsArray.forEach((imgData) => {
output += `
<div class="col-4">
<img src="${imgData.largeImageURL}"/>
</div>
`;
});
document.querySelector('.results').innerHTML = output;
}

<form id="search-form">
<input type="text" class="search">
<input type="submit" value="Submit">
</form>
<div class="results"></div>

Answer 2

您正在使用let hitsArray = resp.data;

什么时候应该let hitsArray = resp;

响应上没有data属性。