API fetch数据仅渲染最后一张图片，其余信息正常显示问题排查

嘿，我一眼就瞅出问题所在了！你看你在displayItems函数里的map循环中，每次处理一个singleItem时，都直接执行了imageContainer.innerHTML = thumbnailArray——这相当于每处理一条数据，就把图片容器里之前的内容全部覆盖掉，最后自然就只剩最后一个item的图片了。而infoContainer是把所有map生成的HTML字符串先join成一个整体再赋值，所以能正常显示6条内容。

修复方案 #

我们只需要先把所有图片的HTML内容收集起来，最后一次性赋值给imageContainer就好，具体修改步骤如下：

• 在displayItems函数开头，初始化一个空字符串用来存储所有图片的HTML代码
• 循环处理每个item时，把当前item的图片HTML追加到这个字符串里
• 循环结束后，再把拼接好的字符串赋值给imageContainer.innerHTML

我还顺手修复了你代码里a标签的语法错误——原来的href="${singleItem.url} target="_blank"少了一个闭合双引号，现在已经补上啦。

修改后的完整代码 #

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) => { 
      return resp.json() 
    }) 
    .then( items => { 
      displayItems(items) 
    }) 

  function displayItems(items) { 
    console.log(items) 
    imageContainer.innerHTML = '' 
    infoContainer.innerHTML = '' 
    // 新增：用来收集所有图片的HTML字符串
    let imageHtml = ''
    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('') 
      // 修改：把当前item的图片HTML追加到总字符串里，而不是直接覆盖容器
      imageHtml += 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 
    // 最后一次性把所有图片HTML赋值给容器
    imageContainer.innerHTML = imageHtml
  } 
} 
window.addEventListener('DOMContentLoaded', main)

内容的提问来源于stack exchange，提问作者David E. Romero Salem