Skip to content

How to dynamically create a table from a JSON with nested lists using Javascript?

I’m trying to create an HTML table from a JSON file which values can include nested lists as per the example below:

    {"entry 1":[
     "entry 2":"N/A",
     "entry 3":[
     "entry 4":[

My goal is to create an HTML table with a predefined header for the two columns “header_title_1” and “header_title_2” that will never change, and the table should look like this:


Thanks for your help !


Using the iterator on the object to get the key. I created a row for each property, then a cell for the key and value. Then if the value isn’t an array, like the entry2 key, we make it an array to iterate through the elements.

Creating a new row for each element in the array and creating a new cell for the items in the array. If it is an array, the value would be converted to a string separated by the comma ‘,’ or it would be set just as it is.

Then we append the elements to the body of the table.

const tbody = document.getElementById('table').tBodies[0];
const obj = {"entry 1":[["text1","text2","text3"],["text4","text5","text6"],["text7","text8","text9"]],"entry 2":"N/A","entry 3":[["text1","text2","text3"],["text4","text5","text6"]],"entry 4":[["text1","text2"],["text3","text4"]]};

function createTable(obj) {
  tbody.innerHTML = ''; // To reset the table
  for (const key in obj) {
    if (!obj.hasOwnProperty(key)) continue;
    const value = Array.isArray(obj[key]) ? obj[key] : [obj[key]];
    const row = document.createElement('tr');
    const key_cell = Object.assign(document.createElement('td'), {
      innerText: key
    const value_column = Object.assign(document.createElement('td'), {
      innerText: value.splice(0, 1)[0]

    row.append(...[key_cell, value_column]);

    value.forEach(val => {
      const inner_row = document.createElement('tr');
      const empty_key_cell = document.createElement('td');
      const value_cell = Object.assign(document.createElement('td'), {
        innerText: val
      inner_row.append(...[empty_key_cell, value_cell]);

<table id="table" border="1" width="100%">