Путаница при попытке доступа и массива внутри массива. - PullRequest
0 голосов
/ 24 июня 2018

Например, я использую API выборки, чтобы получить данные из API NY Times и.Внутри ответа есть объект с именем «Мультимедиа», в котором есть изображения.Я создал шаблонный литерал для сбора необходимых данных, но, похоже, не могу получить какие-либо изображения для загрузки. 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, но, похоже, не могу получить изображения.Любая помощь или объяснение, почему я не могу получить эту работу, будет принята с благодарностью.Спасибо!

Ответы [ 2 ]

0 голосов
/ 24 июня 2018

Вы должны выполнить итерацию по user.multimedia, как это

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

и в output поставить ${imgs}, где вы хотите изображения.Есть несколько изображений с разными размерами, поэтому вы должны выбрать одно из них, я думаю.

0 голосов
/ 24 июня 2018

Похоже, user.multimedia - это массив объектов, а не просто одно значение. Вам нужно либо перебрать массив, либо выбрать нужный элемент по индексу:

user.multimedia[0].url

Вот краткий пример использования первого изображения в массиве

...