Populate HTML table from JS array
Small piece of code to create an html table from a js array
HTML
<div id="myDiv">
</div>
JavaScript
myArray = [
"Heading 1",
"Heading 2",
"Data 1",
"Data 2",
"Data 3",
"Data 4",
];
// Arguments are:
// 1) Are there headers in the table/array? (boolean)
// 2) How many columns? (int)
// 3) The array of data
function populateTable(boolHeaders, nColumns, dataArray) {
let arrayCopy = dataArray.slice(0); // Create a copy as not to alter the original array
let myTable = "<table>";
// Populate headers
if (boolHeaders == true) {
myTable += "<tr>";
for (let i = 0; i < nColumns; i++) {
if (arrayCopy.length == 0) {
myTable += "<th>" + "" + "</th>";
} else {
myTable += "<th>" + arrayCopy.shift() + "</th>";
}
}
myTable += "</tr>";
}
// Populate body
while (arrayCopy.length > 0) {
myTable += "<tr>";
for (let i = 0; i < nColumns; i++) {
if (arrayCopy.length == 0) {
myTable += "<td>" + "" + "</td>";
} else {
myTable += "<td>" + arrayCopy.shift() + "</td>";
}
}
myTable += "</tr>";
}
myTable += "</table>";
return myTable;
}
myTable = populateTable(true, 2, myArray);
document.getElementById("myDiv").innerHTML = myTable;