API 中的 fetch() 未渲染所有图像

Question

I successfully manage to fetch and render information from an API however the images from the API are not displayed all but just one and the last one.

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)

Why is rendering 1 image and not all the 6 from the request as the rest of information? So imageContainer does render 1 image and infoContainer render all the 6 elements

Answer 1

Try using this please. This is because you are just overwriting the images and just last one shows. imageContainer.innerHTML += thumbnailArray

Answer 2

You were replacing the previous content every time while doing:

imageContainer.innerHTML = thumbnailArray;

Check this:

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();