我想知道下面的代码有什么问题。我正在尝试从 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>
这是索引.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()
结果：仅显示一张包含名称、品牌和 URL 的图像。我尝试使用 forEach(( 而不是 map((，但仍然不起作用。知道吗？
- 在您的代码中，您调用了
image.map()。 - javascript 中的
map()函数仅适用于数组，因此当您在图像上使用它时会抛出错误。 - 因此，若要消除此特定错误，请将代码的
h2部分替换为如下所示的内容：
<h2>This is an image</h2>
或者您希望图像被调用的任何内容。您可以使用以下方法查找图像源的标题
document.getElementByID("imagename").src
您编辑的代码仍然存在 2 个问题：
- 代码中没有
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);
});