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 Answer 1

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\$

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.