How can I create an HTML table with content taken from a javascript array?

Question

I'm new to HTML and javascript so need assistance with some of the basics....

I have a javascript file with an array of elements:


export let options = [
    {
        att1: "opt1",
        att2: "some val 1",
        att3: 1,
        att4: 5,
    },
    {
        att1: "opt2",
        att2: "some val 2",
        att3: 2,
        att4: 2,
    },
    {
        att1: "opt3",
        att2: "some val 3",
        att3: 33,
        att4: 10,
    }
]

I want to create an HTML table (using the 'table' tag) with this array's content which will have the following format:

	Option 1	Option 2	Option 3
att1	opt1	opt2	opt3
att2	some val 1	some val 2	some val 3
att3	1	2	33
att4	5	2	10

How can I do it? I'm not sure wether it's possible or not, but I prefer the table's size/headers/attributes' names to be taken from the array itself and not to define them manually. In addition, I cannot touch the file with the array, i.e. I can only import it to another javascript file or src it in the HTML.

Thanks in advance, a confused newbie

*I've had some trial and error, but I'm not quite sure what I've already tried and what exactly happened as I am still not familiar and don't understand enough these languages and concepts

So what have you tried? createElement or build a string on a loop. — epascarello, Nov 11 '22 at 17:31
Does this answer your question? [Create HTML table from JavaScript object](https://stackoverflow.com/questions/17684201/create-html-table-from-javascript-object) — GrafiCode, Nov 11 '22 at 17:34

score 1 · Answer 1 · answered Nov 11 '22 at 17:43

Mostly these are the commands that you need. Example:

const table = document.createElement("table");
const rowOne = document.createElement("tr");
const cellOne = document.createElement("td");
const dataForCellOne =  options.att1;
cellOne.appendChild(data);

Just check what you need from HTML tags like 'table', 'th','tr' etc. You can create it by looping throw your object or manually.

The basic algorithm of doing it:

create table element

create row element

create cell elements

append data to a cell, then append cell to row, and go on like this

tacoshy · Answer 2 · 2022-11-11T22:31:23.640

You can include rows into a table by using insertAdjacentHTML. That function has 2 parameters: (location, string).

The location beforeend will insert the HTML before the end of the closing tag (in this case the table).

Then you need 2x for-loops to create the content dynamically.

you create the html for a row. For that you need to use the for-loop to check how long an object with your array is. You can do that by using Object.keys(variable).length. The variable must be an object within your array for which you can select the first with options[0]
You need to add the first column which also works as a key. Since it follows the pattern I created it with att${i+1} which takes the index of the for-loop into account.
Then I use the second for-loop that creates as many additional columns as many objects you have within your array: options.length.
Within that for-loop I call every single object and call the value off the key I mentioned in step 2:

// array of object
let options = [{
    att1: "opt1",
    att2: "some val 1",
    att3: 1,
    att4: 5,
  },
  {
    att1: "opt2",
    att2: "some val 2",
    att3: 2,
    att4: 2,
  },
  {
    att1: "opt3",
    att2: "some val 3",
    att3: 33,
    att4: 10,
  }
]


// selects the table to write in
let table = document.querySelector('table');

// first for loop that checks the length of the objects within your array
for (let i = 0; i < Object.keys(options[0]).length; i++) {

  // creates a variable to be used as key and the first column content
  let irow = `att${i+1}`;
  
  // creates the first column
  let row = `<td>${irow}</td>`;
  
  // second for loop that adds as many columns as objects within your array exist
  for (let icol = 0; icol < options.length; icol++) {
  
    // adds a column to the row for every object
    row += `<td>${options[icol][irow]}</td>`;
  }
  
  // creates the row and inserts it into the table
  table.insertAdjacentHTML('beforeend', `<tr>${row}</tr>`);
}

table {
  border-collapse: collapse;
}

td, th {
  border: 1px solid black;
  padding: 5px;
}

<table>
  <tr>
    <th></th>
    <th>Option 1</th>
    <th>Option 2</th>
    <th>Option 3</th>
  </tr>
</table>

score 0 · Answer 3 · answered Nov 11 '22 at 17:38

You can achieve that interacting with the DOM using Document.createElement() in JavaScript.

Take a look at this documentation, it may lead you into the right direction.

https://developer.mozilla.org/en-US/docs/Web/API/Document

https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement

score -1 · Answer 4 · answered Nov 11 '22 at 17:37

There are several technical approaches, but basically js needs to create the html code.

One vanilla approach could be to create a document fragment, and append there all the needed tags and their attributes via javascript. Then add the document fragment to the DOM via js.

Another vanilla approach would be to create the table code as string. Therefor you append the needed tags and attributes subsequently to the initial empty string.

Generally, you have to get familiar with how a table is set up first.

How can I create an HTML table with content taken from a javascript array?

4 Answers4