来自 API 的 fetch() 未呈现所有图像答案

【问题标题】：fetch() from API not rendering all images来自 API 的 fetch() 未呈现所有图像
【发布时间】：2020-10-09 13:32:26
【问题描述】：

我成功地设法从 API 获取和呈现信息，但是来自 API 的图像并未全部显示，而是仅显示一张和最后一张。

function main() {

  const imageContainer = document.querySelector('.imageContainer')
  const infoContainer = document.querySelector('.infoContainer')

fetch('https://api.taboola.com/1.2/json/apitestaccount/recommendations.get?app.type=web&app.apikey=7be65fc78e52c11727793f68b06d782cff9ede3c&source.id=%2Fdigiday-publishing-summit%2F&source.url=https%3A%2F%2Fblog.taboola.com%2Fdigiday-publishing-summit%2F&source.type=text&placement.organic-type=mix&placement.visible=true&placement.available=true&placement.rec-count=6&placement.name=Below%20Article%20Thumbnails&placement.thumbnail.width=640&placement.thumbnail.height=480&user.session=init')

  .then((resp) => {
    // console.log(resp)
    return resp.json()
  })

  .then( items => {
    displayItems(items)
    // console.log(items)
  })

  function displayItems(items) {
    console.log(items)
    imageContainer.innerHTML = ''
    infoContainer.innerHTML = ''
    const listArray = items.list.map(singleItem => {
      console.log(singleItem)
      const thumbnailArray = singleItem.thumbnail.map( element => {
        console.log(element)
        return ` 
          <div>
            <img src="${element.url}" alt="image"/>
          </div>
        `
      }).join('')
      // imageContainer.innerHTML = thumbnailArray.join('')
      imageContainer.innerHTML = thumbnailArray

      return `
        <div>
          <a href="${singleItem.url} target="_blank">
          <h1>${singleItem.name}</h1>
          <p>${singleItem.branding}</p>
          </a>
          <p> Category: ${singleItem.categories}</p>
        </div>
      `
    }).join('')
    infoContainer.innerHTML = listArray
    // console.log(listArray)
  }






}

window.addEventListener('DOMContentLoaded', main)

为什么将请求中的 1 个图像而不是所有 6 个图像作为其余信息呈现？所以 imageContainer 确实渲染了 1 张图片， infoContainer 渲染了所有 6 个元素

【问题讨论】：

所有图片都获取了吗？检查 DevTools 中的 Network 选项卡。生成的 HTML 是什么？
可能是因为您每次都用最新图像覆盖容器内容，而不是将图像附加到现有图像？

标签： javascript ajax api fetch fetch-api

【解决方案1】：

请尝试使用它。这是因为您只是在覆盖图像并且仅显示最后一个图像。 imageContainer.innerHTML += thumbnailArray

【讨论】：

【解决方案2】：

你每次都在替换之前的内容：

imageContainer.innerHTML = thumbnailArray;

检查一下：

function main() {

  const imageContainer = document.querySelector('.imageContainer')
  const infoContainer = document.querySelector('.infoContainer')

fetch('https://api.taboola.com/1.2/json/apitestaccount/recommendations.get?app.type=web&app.apikey=7be65fc78e52c11727793f68b06d782cff9ede3c&source.id=%2Fdigiday-publishing-summit%2F&source.url=https%3A%2F%2Fblog.taboola.com%2Fdigiday-publishing-summit%2F&source.type=text&placement.organic-type=mix&placement.visible=true&placement.available=true&placement.rec-count=6&placement.name=Below%20Article%20Thumbnails&placement.thumbnail.width=640&placement.thumbnail.height=480&user.session=init')

  .then((resp) => {
    // console.log(resp)
    return resp.json()
  })

  .then( items => {
    displayItems(items)
    // console.log(items)
  })

  function displayItems(items) {
    console.log(items)
    imageContainer.innerHTML = ''
    infoContainer.innerHTML = ''
    const listArray = items.list.map(singleItem => {
      const thumbnailArray = singleItem.thumbnail.map( element => {
        console.log(element)
        return ` 
          <div>
            <img src="${element.url}" alt="image"/>
          </div>
        `
      }).join('');
      imageContainer.innerHTML += thumbnailArray;

      return `
        <div>
          <a href="${singleItem.url} target="_blank">
          <h1>${singleItem.name}</h1>
          <p>${singleItem.branding}</p>
          </a>
          <p> Category: ${singleItem.categories}</p>
        </div>
      `
    }).join('')
    infoContainer.innerHTML = listArray
    // console.log(listArray)
  }
}

main();

【讨论】：