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.