Question

例如，我正在使用访存api从纽约时报api和中获取数据。响应内部有一个名为“ Multimedia”的对象，其中包含图像。我创建了一个模板文字来获取必要的数据，但是似乎无法获取任何图像。DEMO ON CODEPEN这是我的代码：

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

Here's a quick example using the first image in the array

Answer 2

您应该像这样遍历user.multimedia

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

，然后在output中将${imgs}放在想要图像的位置。有几张大小不一的图片，所以我应该选择其中一张。

尝试访问数组内部的数组时感到困惑。

2 个答案: