Creating HTML table with JSON data using pure JS

Question

In the below function I'm fetching data from a JSON object, then creating and populating a HTML table with the contents. Yes the code is readable but I feel that it just looks too long winded for what it is. Any suggestions to how this could be simplified or made more concise?

function makeTable(data) { let table = document.createElement('table'); table.id = 'itemData'; let thead = document.createElement('thead'); table.appendChild(thead); let tbody = document.createElement('tbody'); table.appendChild(tbody); let header = document.createElement('tr'); let dateHeader = document.createElement('th'); let item1Header = document.createElement('th'); let item2Header = document.createElement('th'); let item3Header = document.createElement('th'); let item4Header = document.createElement('th'); let item5Header = document.createElement('th'); let item6Header = document.createElement('th'); let item7Header = document.createElement('th'); dateHeader.appendChild(document.createTextNode('Date')); item1Header.appendChild(document.createTextNode('Item 1')); item2Header.appendChild(document.createTextNode('Item 2')); item3Header.appendChild(document.createTextNode('Item 3')); item4Header.appendChild(document.createTextNode('Item 4')); item5Header.appendChild(document.createTextNode('Item 5')); item6Header.appendChild(document.createTextNode('Item 6')); item7Header.appendChild(document.createTextNode('Item 7')); header.appendChild(dateHeader); header.appendChild(item1Header); header.appendChild(item2Header); header.appendChild(item3Header); header.appendChild(item4Header); header.appendChild(item5Header); header.appendChild(item6Header); header.appendChild(item7Header); thead.appendChild(header); for (let i = 0; i < Object.keys(data).length; i++) { let tr = document.createElement('tr'); let dateCell = document.createElement('td'); let item1Cell = document.createElement('td'); let item2Cell = document.createElement('td'); let item3Cell = document.createElement('td'); let item4Cell = document.createElement('td'); let item5Cell = document.createElement('td'); let item6Cell = document.createElement('td'); let item7Cell = document.createElement('td'); dateCell.appendChild(document.createTextNode(Object.keys(data)[i])); item1Cell.appendChild(document.createTextNode(data[Object.keys(data)[i]]['item1'])); item2Cell.appendChild(document.createTextNode(data[Object.keys(data)[i]]['item2'])); item3Cell.appendChild(document.createTextNode(data[Object.keys(data)[i]]['item3'])); item4Cell.appendChild(document.createTextNode(data[Object.keys(data)[i]]['item4'])); item5Cell.appendChild(document.createTextNode(data[Object.keys(data)[i]]['item5'])); item6Cell.appendChild(document.createTextNode(data[Object.keys(data)[i]]['item6'])); item7Cell.appendChild(document.createTextNode(data[Object.keys(data)[i]]['item7'])); tr.appendChild(dateCell); tr.appendChild(item1Cell); tr.appendChild(item2Cell); tr.appendChild(item3Cell); tr.appendChild(item4Cell); tr.appendChild(item5Cell); tr.appendChild(item6Cell); tr.appendChild(item7Cell); tbody.appendChild(tr); } document.body.appendChild(table); } 

Answer 1

The seven columns of items are basically treated identically. You should handle them using a loop instead of duplicating the code seven times.