我有一個字符數組，我想使用 javascript 在 html 中以 4 行的形式顯示名稱、房屋和圖像。 我是foreach嗎？

Question

試過這樣的東西potterCharacters.forEach((x) => getCharacters(x.name)); 這僅顯示名稱，但似乎無法繼續。

function Init()
{
    debugger;
    potterCharacters.forEach((x) => getCharacters(x.name));
    text += "</ul>";
    document.getElementById("rows").innerHTML = text;    
}

function getCharacters(value)
{
    text += "<th>" + value + "</th>";
}```

Answer 1

function Init() {
    const text = potterCharacters.map(character => {
        const { name, house, image } = character
        return `<tr>
            <td>${name}</td>
            <td>${house}</td>
            <td><img src="${image}"/></td>
        </tr>`
    })
    document.getElementById("characters").innerHTML = text    
}

html：

<table id="characters"></table>

Answer 2

嘗試過類似potterCharacters.forEach((x) => getCharacters(x.name)); 這僅顯示名稱，但似乎無法繼續使用。

function Init()
{
    debugger;
    potterCharacters.forEach((x) => getCharacters(x.name));
    text += "</ul>";
    document.getElementById("rows").innerHTML = text;    
}

function getCharacters(value)
{
    text += "<th>" + value + "</th>";
}```