Как вставить данные из массива в HTML, используя базовый JavaScript

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

вы можете объединить 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>

Answer 2

Ваш код работает нормально, просто вместо создания строки '<tr><td>${person.name}</td><td>${person.age}</td></tr>' вы должны использовать Шаблонные литералы (Шаблонные строки) :

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

Код:

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

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;
}

loadTableData(personData);

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

А здесь более чистый рефакторинг кода с использованием 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>