从JSON转换为html表

Question

我已经编写了一个脚本，该脚本可以将JSON转换为具有简单JSON格式（只是数组和属性）的html表，现在转换以下格式存在问题。在这里，代码中的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(); 

Answer 1

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"
    }
  ]
}
]
};

现在使用

获取所有数据

表名console.log(data["tables"][0].name)

名称console.log(data["tables"][0].columns['0'].name)

类型console.log(data["tables"][0].columns['0'].type)

更改colomn ['array value']并获取所有