Question

我正在尝试使用PID 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

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

应为let hitsArray = resp;

响应上没有data属性。

Answer 2

响应没有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>

提取API“无法读取未定义的属性'forEach'”

2 个答案: