2 Ways To Create Table From Array In Javascript

Welcome to a beginner’s tutorial on how to create a table from an array with Javascript. Need to display an array of data in a “nice HTML table”?

Yes, it’s that simple. But let us walk through an actual example – Read on!

ⓘ I have included a zip file with the example code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

TLDR – QUICK SLIDES

Fullscreen Mode – Click Here

 

TABLE OF CONTENTS

 

 

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

 

METHOD 1) HTML TABLE STRING

<!-- (A) ALL WE NEED IS AN EMPTY <TABLE> -->
<table id="wrap"></table>

<script>
// (B) ARRAY OF DATA
var data = ["alpaca", "birb", "cate", "doge"];

// (C) CREATE HTML TABLE (2 CELLS PER ROW)
var table = "<tr>", perrow = 2;
data.forEach((value, i) => {
  // (C1) "NORMAL" CELL
  table += `<td>${value}</td>`;
 
  // (C2) CLICK ON CELL TO DO SOMETHING
  // table += `<td onclick="FUNCTION()">${value}</td>`;
 
  // (C3) TO PASS IN A RUNNING NUMBER OR PARAMETER
  // table += `<td onclick="FUNCTION(${i})">${value}</td>`;
 
  // (C4) BREAK INTO NEXT ROW
  var next = i + 1;
  if (next%perrow==0 && next!=data.length) { table += "</tr><tr>"; }
});
table += "</tr>";
 
// (D) ATTACH TO EMPTY TABLE
document.getElementById("wrap").innerHTML = table;
</script>

Yep, “converting” an array to a table is as easy as that.

1. First, all we need for the HTML is an empty <table>.
2. Captain Obvious to the rescue, an array of data.
3. Next, we loop through the array to generate the rows and cells <tr><td>. Yes, HTML is essentially just text, and all we need is to append all the data into HTML cells – <td>${DATA}</td>.
4. Finally, we put the complete HTML string into the empty table, and that’s all to it!

 

 

METHOD 2) CREATE TABLE ELEMENT

<!-- (A) ALL WE NEED IS AN EMPTY <TABLE> -->
<table id="wrap"></table>
 
<script>
// (B) ARRAY OF DATA
var data = ["alpaca", "birb", "cate", "doge"];

// (C) CREATE HTML TABLE (2 CELLS PER ROW)
var table = document.getElementById("wrap"),
    row = table.insertRow(), cell,
    perrow = 2;
data.forEach((value, i) => {
  // (C1) ADD CELL
  cell = row.insertCell();
  cell.innerHTML = value;
 
  // (C2) CLICK ON CELL TO DO SOMETHING
  // cell.onclick = FUNCTION;
 
  // (C3) TO PASS IN A RUNNING NUMBER OR PARAMETER
  // cell.onclick = () => console.log(i);
 
  // (C4) BREAK INTO NEXT ROW
  var next = i + 1;
  if (next%perrow==0 && next!=data.length) { row = table.insertRow(); }
});

Yep, this is the “alternate” way to generate an HTML table. The basic mechanics of looping through an array remains, but we now create the table with HTML objects:

• Get the empty HTML table – table = document.getElementById("ID");
• Add a new row to the table – row = table.insertRow();
• Add cells to the row – cell = row.insertCell();
• Append data to the cell – cell.innerHTML = DATA;

You guys who are used to OOP should be very comfortable with this.

 

 

 

WHICH ONE SHOULD WE USE?

Well, both the “string” and “object” methods work nicely. But some flaming troll master code ninjas will probably kick up a huge fuss and insist that we must do it the object-oriented way – As it looks more “advanced” and professional.

I will not argue with that and recommend it as well. The object-oriented way to create elements is just a lot cleaner, without having to write all those manual HTML tags. Still, there is nothing wrong with writing HTML strings and inserting them into the container… HTML is plain text in reality.

 

COMPATIBILITY CHECKS

• Arrow Functions  (PARAMETERS) => { DO SOMETHING } – CanIUse
• Template Literals `This is a ${VARIABLE} string` – CanIUse
• Array For Each – CanIUse

Yep. Some of the “convenient shorthand” is not supported in ancient browsers. Be careful when using those.

 

 

SUMMARY – DOM FUNCTIONS YOU SHOULD KNOW

Function	Description	Reference Link
document.getElementById(ID)	Get the element for the given ID.	Click Here
document.createElement(TAG)	Creates a new DOM element.	Click Here
ELEMENT.appendChild(OBJECT)	Append the given object into the specified element.	Click Here
TABLE.insertRow()	Add a new row to the table.	Click Here
ROW.insertCell()	Add a new cell to the table row.	Click Here

 

TUTORIAL VIDEO

 

INFOGRAPHIC CHEAT SHEET