Рендеринг HTML-таблицу из JSON в экспресс

Рендеринг HTML-таблицу из JSON в экспресс

21.03.2020 09:44:10 Просмотров 12 Источник

Я создаю экспресс-приложение, которое визуализирует csv и превращает его в json. У меня есть этот json как var в моем методе, и я хотел бы иметь возможность визуализировать его в виде таблицы на моей html-странице. Я бы предпочел, чтобы это сделал сервер, но я не думаю, что это слишком напрягло бы клиента, если бы он это сделал. Как бы я это сделал со статическим 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 со статическим файлом.

У вопроса есть решение - Посмотреть?

Ответы - Рендеринг HTML-таблицу из JSON в экспресс / Render a html table from a json in express

Supercool.

21.03.2020 10:17:31

Я предполагаю, что вы хотите отправить таблицу 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>

Является ответом!
xdeepakv

21.03.2020 10:28:21

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>

Закрыть X