Как я могу сделать html таблицу из json объекта

Question

Я создаю express приложение, которое отображает CSV и превращает его в json. У меня есть json в качестве переменной в моем методе, и я хотел бы иметь возможность отобразить его в виде таблицы на моей 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 с файлом stati c.

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

Я предполагаю, что вы хотите отправить таблицу html на основе проанализированных данных CSV.

Вот фрагмент кода

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>