通过方法的 Class 从 JSON 中获取所有数据并显示在 HTML 中

Question

我正在使用 fetch api & json。从 data.json 获取数据后，循环 forEach 仅显示使用 Class 方法转换为 hmtl 元素的最后一个对象，其中写入 console.log return 数组中的所有对象。

class UI {
    displayData(name) {
        const list = document.getElementById('data');
        list.innerHTML = `<p>${name}</p>`;
    }
}

fetch ('./data/data.json')
    .then((response) => {
        return response.json();
    })
    .then((json) => {
        json.forEach(element => {
            const ui = new UI;
            ui.displayData(element)
        });

    });

Answer 1

问题已解决。

在 UI Class 中的 list.innerHTML 中的等于“=”之前添加“+”，以便将下一个 html 元素添加到 const "list"。

Answer 2

正如您在自我回答中指出的那样，没有发生任何串联，因此您正在覆盖您的数据。

我写这个答案是为了对您正在做的事情提出一些重构版本。如果您只是将任意数据连接到 HTML 的上下文中（您正在使用模板字符串执行此操作），则可能会创建无效的 HTML 甚至导致安全问题。您必须转义数据才能使用。 easiest/best 的方法是根本不设置 innerHTML，而是设置 innerText。也许尝试这样的事情......未经测试但应该让你开始。

class UI() {
  getListItem(item) {
    const p = document.createElement('p');
    p.innerText = item;
    return p;
  }

  render(data) {
    const list = document.getElementById('data');
    data.map(this.getListItem).forEach((listItemP) => {
      list.appendChild(listItemP);
    });
  }
}

const ui = new UI();
fetch ('./data/data.json')
  .then((res) => res.json())
  .then(ui.render);

通过方法的 Class 从 JSON 中获取所有数据并显示在 HTML 中

Fetch all data from from JSON and display in HTML via method's Class

javascript

foreach

json

fetch-api

es6-class