1
\$\begingroup\$

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);
}
\$\endgroup\$
1
\$\begingroup\$

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

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.