尝试在数组内部访问和数组时出现混乱

Question

例如，我正在使用fetch api从纽约时报api获取数据。 在响应中，有一个名为"多媒体"的对象，其中包含图像。我创建了一个模板文字来获取必要的数据，但似乎无法提取任何图像。代码笔上的演示 这是我的代码：

const div = document.getElementById('article'),
url = "https://api.nytimes.com/svc/topstories/v2/home.json?api-key=fd168d666e644fe29bbb534d757b374e";
fetch(url)
.then((response) => {return response.json(); })
.then(data => {  

let article = data.results;
console.log(article);
return article.map(user => {
let output = '<div class="container">';
article.forEach(user => {
output += `
<article>
<img src="${user.multimedia.url}">
<h2>${user.title}</h2>
<span class="author"><b>Author:</b> ${user.byline} | <b>Category: </b>${user.section}</span>
<p>${user.abstract}</p>
<a class="btn" href="${user.url}" target="_blank">View Article</a>
</article>
`
});
document.getElementById('article').innerHTML = output;
})
})
.catch( error => { console.log(error); })

%body
#article

我尝试使用user.multimedia.url访问图像，但我似乎无法提取图像。关于为什么我无法获得此工作的任何帮助或解释将不胜感激。谢谢！

Answer 1

看起来user.multimedia 是一个对象数组，而不仅仅是一个值。您需要循环访问数组或按索引选择所需的项目：

user.multimedia[0].url

下面是使用数组中第一个图像的快速示例

Answer 2

你应该像这样迭代user.multimedia

var imgs = "";
article.map(user => {
user.multimedia.map(i=>{
imgs += "<img src="+i.url+">"
})

并在output${imgs}您想要图像的位置。有几张不同大小的图像，所以我认为你应该选择其中一张。