Question

我正在使用访存api和json。从data.json获取数据后，forEach循环仅使用Class方法显示最后一个变成hmtl元素的对象，在其中编写console.log返回数组中的所有对象。

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类的list.innerHTML中，在等于“ =”之前添加“ +”，以将下一个html元素添加到const“ list”。

Answer 2

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

我正在写此答案，以提出一些您正在做的重构版本。如果仅将任意数据连接到HTML上下文中（使用模板字符串），则可能会创建无效的HTML，甚至可能导致安全问题。您必须转义数据以供使用。最简单/最佳的方法不是完全设置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);

从JSON提取所有数据并通过方法的类以HTML显示

2 个答案: