How can I render a html table from a json object

Question

I am building an express app that renders a csv and turns it into a json. I have this json as a var in my method and would like to be able to render it as a table in my html page. How can I turn this json object into a html table?

e.g.

parsed 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' } ]

I want to make this into a table in html with a static file.

I dont understand why this was downvoted? Was it a poorly phrased question? — user8108264
– user8108264, Commented Mar 21, 2020 at 18:49

M A Salman · Accepted Answer · 2020-03-21 19:17:31Z

1

Im assuming you want to send table html based on csv parsed data.

Here is the coding snippet

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>

answered Mar 21, 2020 at 19:17

M A Salman

3,8302 gold badges14 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user8108264 Over a year ago

Yes this is what I needed. Do you know why this post would be downvoted so much?

M A Salman Over a year ago

In your question "How would I do this with a static html file.", " I want to make this into a table in html with a static file." these statements were little vague.

xdeepakv · Accepted Answer · 2020-03-21 19:28:21Z

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>

Collectives™ on Stack Overflow

How can I render a html table from a json object

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related