Преобразование из JSON в таблицы html

Я написал сценарий, который преобразует json в таблицы html с простым форматом JSON (только массив и свойства), и теперь у меня возникла проблема с преобразованием формата ниже. Здесь table1, table2, table3 в коде - это просто заголовок (показанный на изображении), а «name» и «type» - это свойства, которые будут использоваться в качестве столбца в таблице. Изображения, как должен быть на выходе.

`{
  "tables": [   
 {
  "name": "table1",
  "columns": [
    {
      "name": "asset_id",
      "type": "VARCHAR(36)"
    },
    {
      "name": "time",
      "type": "TIMESTAMP"
    }
  ]
},
{
  "name": "table2",
  "columns": [
    {
      "name": "asset_id",
      "type": "VARCHAR(36)"
    },
    {
      "name": "time",
      "type": "TIMESTAMP"
    },
    {
      "name": "added",
      "type": "BOOLEAN"
    }
  ]
},
{
  "name": "table3",
  "columns": [
    {
      "name": "asset_id",
      "type": "VARCHAR(36)"
    },
    {
      "name": "time",
      "type": "TIMESTAMP"
    },
    {
      "name": "added",
      "type": "BOOLEAN"
    },
    {
      "name": "enable",
      "type": "BOOLEAN"
    }
  ]
}
]
}`

вот мой код js

function loadJSON(callback) {   
  var xobj = new XMLHttpRequest();
      xobj.overrideMimeType("application/json");
  xobj.open('GET', 'multiple.json', true); 
  xobj.onreadystatechange = function () {
        if (xobj.readyState == 4 && xobj.status == "200") {
          callback(xobj.responseText);
        }
  };
  xobj.send(null);  
}

function json2table(tableName, json, classes) {
  var cols = Object.keys(json[1]);

  var headerRow = '';
  var bodyRows = '';

  classes = classes || '';

  function capitalizeFirstLetter(string) {
    return string.charAt(0).toUpperCase() + string.slice(1);
  }

  cols.map(function(col) {
    headerRow += '<th class = "th-data">' + capitalizeFirstLetter(col) + '</th>';
  });

  json.map(function(row) {
    bodyRows += '<tr>';

    cols.map(function(colName) {
      bodyRows += '<td>' + row[colName] + '</td>';
    })

    bodyRows += '</tr>';
  });

  tableName = capitalizeFirstLetter(tableName);

  return '<h4>' + tableName + '</h4>' +
        '<table class = "' +
        classes +
        '"><thead><tr>' +
        headerRow +
        '</tr></thead><tbody>' +
        bodyRows +
        '</tbody></table>' +
        '<br>';
}

function init() {
  loadJSON(function(response) {
    var actual_JSON = JSON.parse(response);
    Object.entries(actual_JSON).forEach((item) => $("#tableGoesHere").append(json2table(item[0], item[1], 'table',)));
  });
}

init();