将 api 对象从 fetch 写到 html答案

【问题标题】：Write out api object from fetch to html将 api 对象从 fetch 写到 html
【发布时间】：2019-05-10 06:39:07
【问题描述】：

我正在尝试让我的代码将 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 文件创建元素，但好像有些代码被忽略了。

【问题讨论】：

那会是哪一段代码？
idk函数
我看不到您将容器附加到 DOM 的位置？

标签： javascript html fetch-api

【解决方案1】：

如果你想渲染你正在创建的所有 DOM，你必须以某种方式将它添加到浏览器正在显示的 DOM 树中。最简单的方法是将其添加到正文节点。 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;
  }

【讨论】：