获取数据并动态显示JavaScript DOM_Javascript_Dom_Fetch

获取数据并动态显示JavaScript DOM

javascript dom

获取数据并动态显示JavaScript DOM,javascript,dom,fetch,Javascript,Dom,Fetch,我想知道下面的代码有什么问题。我试图从API获取数据并显示数据。我的想法是创建一个新的innerHTML，并在新创建的节点中显示响应中的数据。问题是我只能从6张图片中检索一张这是我的HTML： <body> <main class="main-area"> <div class="centered"> <section class="cards"> </section

我想知道下面的代码有什么问题。我试图从API获取数据并显示数据。我的想法是创建一个新的innerHTML，并在新创建的节点中显示响应中的数据。问题是我只能从6张图片中检索一张

这是我的HTML：

 <body>  
  <main class="main-area">  
      <div class="centered">
          <section class="cards">    
          </section><!-- .cards -->   
      </div><!-- .centered -->     
  </main>

    <script src="./src/index.js" async defer></script>
  </body>

下面是index.js：

const url = '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'
const newSection = document.querySelector('.cards')


const init = () => {
  fetch(url)
  .then(resp => resp.json())
  .then(data => {
    const article = document.createElement('article');
    article.className = 'card'
    let infos = data.list

    infos.map(el => {
      article.innerHTML = `
      <a href="${el.url}">
          <picture class="thumbnail">
              <img src="${el.thumbnail[0].url}" alt="${el.name}">
          </picture>
          <div class="card-content">
              <h2>${el.name}</h2>
              <p class="branding"><small>${el.branding}</small></p>
          </div>
      </a>
    `
    })

    return newSection.append(article)

  })
}

init()

const url='https://api.taboola.com/1.2/json/apitestaccount/recommendations.get?app.type=web&app.apikey=7be65fc78e52c11727793f68b06d782cff9ede3c&source.id=%2Fdigiday-发布峰会%2F&source.url=https%3A%2F%2blog.taboola.com%2Fdigiday发布峰会%2F&source.type=text&placement.organic type=mix&placement.visible=true&placement.available=true&placement、 rec count=6&placement.name=Below%20文章%20缩略图&placement.thumbnail.width=640&placement.thumbnail.height=480&user.session=init'
const newSection=document.querySelector（“.cards”）
常量init=（）=>{
获取（url）
.then（resp=>resp.json（））
。然后（数据=>{
const article=document.createElement（'article'）；
article.className='card'
让infos=data.list
地图（el=>{
article.innerHTML=`
`
})
returnnewSection.append（文章）
})
}
init（）

结果：仅显示一个带有名称、品牌和URL的图像。我尝试使用forEach（）而不是map（），但仍然不起作用。有什么想法吗

在代码中，调用了
```
image.map（）
```
javascript中的
```
map（）
```


因此，要消除此特定错误，请将代码的h2
部分替换为以下内容：


这是一幅图像

或者任何你想要的图像被称为。您可以使用找到图像源的标题
document.getElementByID（“imagename”）.src
您编辑的代码仍然存在两个问题：
代码中没有newSection
元素引用，因此不能向其追加任何内容
您已经用infos.map（）
创建了article
元素，因此只创建了一次
您的循环应该如下所示：
data.list.map(el => {
  var innerContent = `
        <a href="${el.url}">
            <picture class="thumbnail">
                <img src="${el.thumbnail[0].url}" alt="${el.name}">
            </picture>
            <div class="card-content">
                <h2>${el.name}</h2>
                <p class="branding"><small>${el.branding}</small></p>
            </div>
        </a>
        `;
  var card = document.createElement('div');
  card.className = 'card';
  card.innerHTML = innerContent;
  cardsContainer.appendChild(card);
});

data.list.map（el=>{
var innerContent=`
`;
var card=document.createElement（'div'）；
card.className='card'；
card.innerHTML=innerContent；
cardsContainer.appendChild（卡）；
});
谢谢，我现在能够检索到正确的数据，但即使我使用map（），HTML中的最终结果是，我只能从6个图像中获取一个图像。有什么想法吗？既然你把你的问题全部编辑了，我也编辑了我的答案。太棒了。非常感谢。现在可以了。（我是新加入社区的，我想提高你的答案，但我没有足够的信用！如果你提高我的问题，也许我可以提高你的答案）