使用 inner.HTML 从给定数组创建表

Question

I'm asked to create a table which can be sorted with a press of a button. The table is supposed to be created by a given array.

What I don't understand is how can I use an array loop inside a string so that the.innerHTML function would print the table body with the given object properties.

 main = document.getElementById('body'); listArray = [{name: 'Second', value: 2},{name: 'Fourth', value: 4},{name: 'First', value: 1},{name: 'Third', value: 3}]; let showAll = () => { main.innerHTML = ''; template(listArray); } let template = (arr) => { let loopArray = arr.forEach((item) => {return `<tr><td>${arr.name}</td><td>${arr.value}</td></tr>`}); let html = `<table> <thead><th>Name</th><th id="value">Value</thead> <tbody>` + loopArray + `</tbody></table>`; main.innerHTML += html; } showAll();

Answer 1

Use map instead of forEach so that the returned <tr> HTML string can then be joined together and set as the content of the table. You also need to refer to the properties of the item in the callback, not the arr .

 main = document.getElementById('body'); listArray = [{name: 'Second', value: 2},{name: 'Fourth', value: 4},{name: 'First', value: 1},{name: 'Third', value: 3}]; let showAll = () => { main.innerHTML = ''; template(listArray); } let template = (arr) => { const tableContentHTML = arr.map((item) => {return `<tr><td>${item.name}</td><td>${item.value}</td></tr>`}).join(''); let html = `<table> <thead><th>Name</th><th id="value">Value</thead> <tbody>` + tableContentHTML + `</tbody></table>`; main.innerHTML = html; } showAll();

 <div id="body"></div>

But concatenated HTML has security risks. If the input isn't known to be 100% trustworthy, a better approach would be to assign to the textContent of <td> s.

 const main = document.getElementById('body'); const listArray = [{name: 'Second', value: 2},{name: 'Fourth', value: 4},{name: 'First', value: 1},{name: 'Third', value: 3}]; let showAll = () => { template(listArray); } let template = (arr) => { main.innerHTML = ''; const table = main.appendChild(document.createElement('table')); for (const item of arr) { const tr = table.appendChild(document.createElement('tr')); tr.appendChild(document.createElement('td')).textContent = item.name; tr.appendChild(document.createElement('td')).textContent = item.value; } }; showAll();

 <div id="body"></div>