fetch () из API не отображает все изображения

Question

Мне удалось получить и отобразить информацию из 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 элементов

Answer 1

Вы заменяли предыдущий контент каждый раз при выполнении:

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

Answer 2

Попробуйте использовать это, пожалуйста. Это потому, что вы просто перезаписываете изображения, и отображается только последнее. imageContainer.inner HTML + = thumbnailArray