javascript - 如何使用基本 JavaScript 将数组中的数据插入 HTML

Question

我最近一直在尝试学习 HTML，但遇到了问题，非常感谢您的帮助。我的代码如下，但是当我运行它时，它实际上并没有将数据插入表中，而是插入了代码。

我尝试更改代码的顺序并添加 ;在不同的地方，但不知道足够的 HTML 来解决问题。

let sortDirection = false;
let personData = [
    {name: 'Dylan', age: 31 },
    {name: 'Hannah', age: 17 },
    {name: 'Dollan', age: 39 },
    {name: 'Elle', age: 3 },
];

window.onload = () => {
    loadTableData(personData);
};

loadTableData(personData);

function loadTableData(personData) {
    const tableBody = document.getElementById('tableData');
    let dataHtml = '';

    for(let person of personData){
        dataHtml+= '<tr><td>${person.name}</td><td>${person.age}</td></tr>';
    };
console.log(dataHtml);
tableBody.innerHTML = dataHtml;

} /* The table data is an id I used in the table */

它只是不插入数据。感谢您提前提供的任何帮助

Answer 1

您的代码工作正常，只需创建字符串 '<tr><td>${person.name}</td><td>${person.age}</td></tr>'您必须使用Template literals (Template strings) :

`<tr><td>${person.name}</td><td>${person.age}</td></tr>`

代码:

使用Array.prototype.reduce() :

const personData = [{name: 'Dylan',age: 31},{name: 'Hannah',age: 17},{name: 'Dollan',age: 39},{name: 'Elle',age: 3}]
const tableBody = document.getElementById('tableData')

tableBody.innerHTML = personData.reduce((a, {name, age}) => 
  a += `<tr><td>${name}</td><td>${age}</td></tr>`, '')

<table id="tableData"></table>