Выписать объект api из fetch в html

Question

Я пытаюсь получить свой код для вывода объекта API в HTML-файл.

const container = document.createElement('div');
container.setAttribute('class', 'container');


obj = fetch('https://apis.is/concerts')
.then(function(response) {
    return response.json();
})
.then(function(data) {
    return obj = data;
})
.then(() => idk()) 

    function idk() {
    let count = 0;
        for(key in obj.results) {
            count++;
        };
        console.log(count);
        for(let i = 0; i < count; i++) {

            const card = document.createElement('div');
            card.setAttribute('class', 'card');

            const h1 = document.createElement('h1');
            h1.textContent = obj.results[i].eventDateName;

            const p = document.createElement('p');
            p.textContent = obj.results[i].dateOfShow;

            container.appendChild(card);
            card.appendChild(h1);
            card.appendChild(p);
        };
    };

Я пытался использовать DOM для создания элементов для HTML-файла, но это похоже на некоторые изкод игнорируется.

Answer 1

Если вы хотите визуализировать весь DOM, который вы создаете, вы должны каким-то образом добавить его в дерево DOM, которое отображает браузер.Самый простой способ - добавить его в узел body.document.querySelector('body').appendChild(container); как только вы закончите обработку данных.

Но я бы посоветовал немного изменить ваш код.Например, на этом шаге вы присваиваете результаты исходному объекту, где вы сохраняете обещание с результатами.Кроме того, это глобальный объект, настолько быстрый, что вы можете получить условие гонки.

.then(function(data) { return obj = data; })

Кроме того, функция idk () связана с той очень специфической переменной obj, котораяэто действительно трудно проверить.

obj = fetch('https://apis.is/concerts')
.then(function(response) {
    return response.json(); //subscribe to response stream
})
.then((response) => {
  const allEvents = eventsDomTree(response.results); // create the events DOM tree based on response
  document.querySelector('body').appendChild(allEvents); //append the created list to document DOM tree
});

  function eventsDomTree(events) {
    const allEvents = document.createElement('div');
    events.forEach((event) => {
      const card = document.createElement('div');
      card.setAttribute('class', 'card');

      const eventName = document.createElement('h1');
      eventName.textContent = event.eventDateName;

      const dateOfShow = document.createElement('p');
      dateOfShow.textContent = event.dateOfShow

      card.appendChild(eventName);
      card.appendChild(dateOfShow);

      allEvents.appendChild(card);
    });
    return allEvents;
  }