Table is not created as expected

Question

I'm trying to create a table to represent data extracted from firebase RT database, I have the following data in json format:

var jsonData =
            {
                availability: {
                    supermarket01: {
                        '2342342': {
                            green100: 'no',
                            green200: 'yes',
                            red200: 'yes',
                            yellow: 'no',
                            purple100: 'yes',
                            cyan100: 'no'
                        },
                        '58943792': {
                            green200: 'yes',
                            orange200: 'yes',
                            red200: 'no'
                        },
                        '398489593': {
                            green200: 'no',
                            orange200: 'no',
                            red200: 'yes'
                        },
                        '1605290957000': {
                            orange: 'yes',
                            green2123: 'no',
                            green222: 'yes'
                        }
                    },
                    supermarket02: {
                        '23423423': {
                            green200: 'yes',
                            orange200: 'no',
                            red200: 'no'
                        },
                        '23947928': {
                            green200: 'yes',
                            orange200: 'no',
                            red200: 'yes'
                        }
                    }
                }
            }

I want to create a table which looks somehing like the photo below:

but I'm getting a table which looks like this:

what I've tried so far:

function jsonTabulizer(jsonData, selector) {
    var reportType = [],
        storeKeys = [],
        reportKeys = [],
        productKeys = [],
        table = document.createElement("table"),
        row = table.insertRow();
    reportType = Object.keys(jsonData);
    storeKeys = Object.keys(jsonData[reportType]);
    for (j = 0; j < storeKeys.length; j++) {
        reportKeys[j] = Object.keys(jsonData[reportType][storeKeys[j]]);
        var cell = row.insertCell();
        cell.innerHTML = storeKeys[j];
        console.log(reportKeys[j].length);
        cell.setAttribute("rowSpan", reportKeys[j].length);
        for (k = 0; k < reportKeys[j].length; k++) {
            productKeys[j] = Object.keys(jsonData[reportType][storeKeys[j]][reportKeys[j][k]]);
            row = table.insertRow();
            cell = row.insertCell();
            cell.innerHTML = reportKeys[j][k];
            // console.log(productKeys[j]);
        }
    }
    document.getElementById("test_table").appendChild(table);
}

and in html body:

<div id="test_table"></div>

can anyone help me to achieve this. Thanks

Answer 1

You need to create new row in each iteration so your row = table.insertRow(); line is outside first loop it should be inside .Then , first td in every tr will have total rowspan depending on keys length so you need to add get total length and set rowspan of first td same for other trs.

Demo Code :

var jsonData = {
  availability: {
    supermarket01: {
      '2342342': {
        green100: 'no',
        green200: 'yes',
        red200: 'yes',
        yellow: 'no',
        purple100: 'yes',
        cyan100: 'no'
      },
      '58943792': {
        green200: 'yes',
        orange200: 'yes',
        red200: 'no'
      },
      '398489593': {
        green200: 'no',
        orange200: 'no',
        red200: 'yes'
      },
      '1605290957000': {
        orange: 'yes',
        green2123: 'no',
        green222: 'yes'
      }
    },
    supermarket02: {
      '23423423': {
        green200: 'yes',
        orange200: 'no',
        red200: 'no'
      },
      '23947928': {
        green200: 'yes',
        orange200: 'no',
        red200: 'yes'
      }
    }
  }
}
jsonTabulizer(jsonData)

function jsonTabulizer(jsonData, selector) {
  var reportType = [],
    storeKeys = [],
    reportKeys = [],
    productKeys = [],
    table = document.createElement("table"),

    reportType = Object.keys(jsonData);
  storeKeys = Object.keys(jsonData[reportType]);
  for (j = 0; j < storeKeys.length; j++) {
    var rowspan = 0; //decalre this
    reportKeys[j] = Object.keys(jsonData[reportType][storeKeys[j]]);

    var row = table.insertRow(); //put this line inside
    var cell1 = row.insertCell();
    cell1.innerHTML = storeKeys[j];
    rowspan += reportKeys[j].length //outer array length

    for (k = 0; k < reportKeys[j].length; k++) {
      productKeys[j] = Object.keys(jsonData[reportType][storeKeys[j]][reportKeys[j][k]]);
      rowspan += productKeys[j].length
      var row = table.insertRow();
      cell = row.insertCell();
      cell.innerHTML = reportKeys[j][k];
      cell.setAttribute("rowspan", parseInt(productKeys[j].length + 1)); //add rowspan 
      for (m = 0; m < productKeys[j].length; m++) {
        var row = table.insertRow();
        cell = row.insertCell();
        cell.innerHTML = productKeys[j][m]; //(yellow, red ..key)
        cell = row.insertCell();
        cell.innerHTML = jsonData[reportType][storeKeys[j]][reportKeys[j][k]][productKeys[j][m]]; //value (yes,no..)

      }

    }
    cell1.setAttribute("rowspan", parseInt(rowspan + 1)); //add rowspan to first tds 
  }
  document.getElementById("test_table").appendChild(table);
}

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

table {
  border-collapse: collapse;
  border-spacing: 0px;
}

<div id="test_table"></div>