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

【问题标题】：How to insert data from an array into HTML using basic JavaScript如何使用基本 JavaScript 将数组中的数据插入 HTML
【发布时间】：2019-09-07 13:36:22
【问题描述】：

我最近一直在尝试学习 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 */

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

【问题讨论】：

同时添加相关的 HTML

标签： javascript html dom html-table

【解决方案1】：

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

`<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>`, '')

&lt;table id="tableData"&gt;&lt;/table&gt;

【讨论】：

非常感谢！我无法告诉你我有多感激。
是的，您的代码工作得很好，只是缺少反引号
@Apoorv “缺少反引号”是什么意思？真的不明白..即使是代码示例也可以。谢谢
@Pintsize21 我在您的答案中添加了另一个解决方案代码示例，但使用Array.prototype.reduce() 进行了代码重构。希望对您有所帮助，谢谢
@YosvelQuintero 我指的是dataHtml+= '<tr><td>${person.name}</td><td>${person.age}</td></tr>'; 行，在这种情况下，它将创建行和单元格，但它们的值将是${person.name} and ${person.age} as Strings，而不是变量中的值。但是dataHtml+=`<tr><td>${person.name}</td><td>${person.age}</td></tr>values 的变量会被插入到单元格中

【解决方案2】：

你可以连接html和参数

dataHtml+= '<tr><td>'+person.name+'</td><td>'+person.age+'</td></tr>';

如下所示

     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 */

和你的 html ：

    <table id="tableData">

    </table>

【讨论】：