javascript - 从 JSON 中获取所有数据并通过方法的类以 HTML 形式显示

Question

我正在使用 fetch 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”。