如何从 json 对象呈现 html 表

Question

我正在构建一个快速应用程序，它可以呈现 csv 并将其转换为 json。我在我的方法中将此 json 作为 var 并希望能够将其呈现为我的 html 页面中的表格。我怎样才能把这个json对象变成一个html表？

例如

解析的 json

[{ 'Province/State': 'West Virginia',
    'Country/Region': 'US',
    'Last Update': '2020-03-19T02:33:09',
    Confirmed: '2',
    Deaths: '0',
    Recovered: '0',
    Latitude: '38.4912',
    Longitude: '-80.9545' },
  { 'Province/State': 'US',
    'Country/Region': 'US',
    'Last Update': '2020-03-19T19:13:18',
    Confirmed: '1',
    Deaths: '0',
    Recovered: '108',
    Latitude: '37.0902',
    Longitude: '-95.7129' } ]

我想用静态文件把它做成 html 表格。

Answer 1

let json=[
  { 
    'Province/State': 'West Virginia',
    'Country/Region': 'US',
    'Last Update': '2020-03-19T02:33:09',
    Confirmed: '2',
    Deaths: '0',
    Recovered: '0',
    Latitude: '38.4912',
    Longitude: '-80.9545' 
  },
  { 'Province/State': 'US',
    'Country/Region': 'US',
    'Last Update': '2020-03-19T19:13:18',
    Confirmed: '1',
    Deaths: '0',
    Recovered: '108',
    Latitude: '37.0902',
    Longitude: '-95.7129' 
  } ];
let tableHead=""
for(let column in json[0]){
  tableHead+=`<th>${column}</th>`
}
tableHead+="</tr>"
document.querySelector('#table_head').innerHTML=tableHead;

let tableBody=""
json.forEach(element => {
    tableBody+="<tr>"
    for(let prop in element){
      tableBody+=`<td>${element[prop]}</td>`
    }
    tableBody+="</tr>"
});


document.querySelector('#table_body').innerHTML=tableBody;

table {
  border: 1px solid;
}

table tr td{
  border-bottom: 1px solid;
}
table tr:last-child td{
  border-bottom: none;
}

<table>
  <thead id="table_head"></thead>
  <tbody id="table_body"></tbody>
</table>

Answer 2

我假设你想发送基于 csv 解析数据的表格 html。

这里是编码sn-p

let json=[
  { 
    'Province/State': 'West Virginia',
    'Country/Region': 'US',
    'Last Update': '2020-03-19T02:33:09',
    Confirmed: '2',
    Deaths: '0',
    Recovered: '0',
    Latitude: '38.4912',
    Longitude: '-80.9545' 
  },
  { 'Province/State': 'US',
    'Country/Region': 'US',
    'Last Update': '2020-03-19T19:13:18',
    Confirmed: '1',
    Deaths: '0',
    Recovered: '108',
    Latitude: '37.0902',
    Longitude: '-95.7129' 
  } ];
let tableString="<table><tr>"
for(let column in json[0]){
  tableString+=`<th>${column}</th>`
}
tableString+="</tr>"
json.forEach(element => {
    tableString+="<tr>"
    for(let prop in element){
      tableString+=`<td>${element[prop]}</td>`
    }
    tableString+="</tr>"
});
tableString+=`</table>`;

document.querySelector('#main').innerHTML=tableString;

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

<div id="main">
</div>