Creating HTML table with JSON data using pure JS

2018-02-02 21:29:34

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.c

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

    2018-02-02 21:37:01