Выборка данных и динамическое отображение JavaScript DOM - PullRequest
Новая
       10

Выборка данных и динамическое отображение JavaScript DOM

0 голосов
/ 23 сентября 2019

Интересно, что не так со следующим кодом?Я пытаюсь получить данные из 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()

Результат: отображается только одно изображение с именем, маркой и URL.Я попытался использовать forEach () вместо map (), все еще не работает.Любая идея?

Ответы [ 2 ]

0 голосов
/ 23 сентября 2019

По-прежнему есть 2 проблемы с вашим отредактированным кодом:

  1. В вашем коде нет ссылки на элемент newSection, поэтому к нему ничего нельзя добавить.
  2. Высоздал article элемент из вашего infos.map(), поэтому он создается только один раз.

Ваш цикл должен выглядеть следующим образом: 

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);
});
0 голосов
/ 23 сентября 2019
  • В вашем коде вы вызвали image.map().
  • Функция map() в javascript работает только для массивов, поэтому при использовании ее на изображении выдается ошибка.
  • Поэтому, чтобы избавиться от этой конкретной ошибки, замените часть кода h2 на что-то вроде следующего:

<h2>This is an image</h2>

или что угоднохочу, чтобы изображение называлось.Вы можете найти заголовок источника изображения, используя

document.getElementByID("imagename").src

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...