Javascript 从JSON到html表的转换

我编写了一个脚本，将json转换为简单json格式的html表（仅限于数组和属性），现在转换以下格式时遇到问题。在这里，代码中的表1、表2、表3只是标题（如图所示），“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(); 

函数加载JSON（回调）{
var xobj=新的XMLHttpRequest（）；
重写emimetype（“application/json”）；
open（'GET'，'multiple.json'，true）；
xobj.onreadystatechange=函数（）{
if（xobj.readyState==4&&xobj.status==200）{
回调（xobj.responseText）；
}
};
xobj.send（空）；
}
函数json2table（表名、json、类）{
var cols=Object.keys（json[1]）；
var headerRow=“”；
var bodyRows=''；
类别=类别| |“”；
函数首字母大写（字符串）{
返回string.charAt（0.toUpperCase（）+string.slice（1）；
}
cols.map（函数（col）{
headerRow+=''+大写首字母（col）+''；
});
map（函数（行）{
bodyRows+=''；
map（函数（colName）{
bodyRows+=''+行[colName]+''；
})
bodyRows+=''；
});
tableName=大写首字母（tableName）；
返回“”+表名+“”+
'' +
海德罗+
'' +
船舱+
'' +
“
”；
}
函数init（）{
loadJSON（函数（响应）{
var-actual_JSON=JSON.parse（响应）；
Object.entries（实际的JSON）.forEach（（项）=>$（“#tablegoesher”）.append（json2table（项[0]，项[1]，'table'，）；
});
}
init（）；

现在使用

表名

console.log（数据[“表”][0].name）

名称

console.log（数据[“表”][0]。列['0'].name）

键入

console.log（数据[“表”][0]。列['0'].type）

更改column['array value']并获取所有内容

请单击代码段编辑器[]，然后创建一个并描述预期输出。“问题”并没有告诉我们任何事情

var data = {
  "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"
    }
  ]
}
]
};