Display JSON data to HTML Table

TED
November 2, 2023
211 views
2 votes
3 Answers

I a little new to JS and was struggling to display JSON data in a tabular format. The JSON is below

var js = {
  "columns": [{
      "title": "t1"
    },
    {
      "title": "t2"
    },
    {
      "title": "t3"
    },
    {
      "title": "t4"
    },
    {
      "title": "t5"
    }
  ],
  "rows": [
    [
      "t1row1",
      "t2row1",
      "t3row1",
      "t4row1",
      "t5row1"
    ],
    [
      "t1row2",
      "t2row2",
      "t3row2",
      "t4row2",
      "t5row2"
    ],
    [
      "t1row3",
      "t2row3",
      "t3row3",
      "t4row3",
      "t5row3"
    ]
  ]
};

let text = "<table border='1'>"
text += "<tr>";
for (let x in js.columns) {


  text += "<th>" + js.columns[x].title + "</th>";

}
text += "</tr>";
text += "<tr>";
for (let y in js.columns) {

  for (var v in js.rows) {

    text += "<td>" + js.rows[v] + "</td>";

  }
}

text += "</tr>";
text += "</table>"
document.getElementById("demo").innerHTML = text;

<div id="demo"></div>

I have used these loops to get the data in tabular format but I am unable to send the "rows" data into 3 separate rows under the titles. By the current code I am able to put the 5 column name correctly but we have a single row with [t1row1,t2row1,t3row1,t4row1,t5row1] , [t1row2,t2row2,t3row2,t4row2,t5row2] …etc with data inserted instead of 3 rows. Any help would be appreciated

Answers

To achieve your result, you need to iterate over the rows of data and add them to the table while preserving the structure. You have the open/close TR outside of your loop. That means you’re making one large TR with a lot of TD in it (as your result shows you).

You need to move them into your loop, the loop that itterates through the rows. Update code:

var js = {
  "columns": [
    {
      "title": "t1"
    },
    {
      "title": "t2"
    },
    {
      "title": "t3"
    },
    {
      "title": "t4"
    },
    {
      "title": "t5"
    }
  ],
  "rows": [
    [
      "t1row1",
      "t2row1",
      "t3row1",
      "t4row1",
      "t5row1"
    ],
    [
      "t1row2",
      "t2row2",
      "t3row2",
      "t4row2",
      "t5row2"
    ],
    [
      "t1row3",
      "t2row3",
      "t3row3",
      "t4row3",
      "t5row3"
    ]
  ]
};

let text = "<table border='1'>";

text += "<tr>";
for (let x in js.columns) {
  text += "<th>" + js.columns[x].title + "</th>";
}
text += "</tr>";

for (let i in js.rows) {
  text += "<tr>";
  for (let j in js.rows[i]) {
    text += "<td>" + js.rows[i][j] + "</td>";
  }
  text += "</tr>";
}

text += "</table>";
document.getElementById("demo").innerHTML = text;

<div id="demo"></div>

You just need to fix your loop within the row values, not using loop with columns values.
also you need to set tags inside loop to create row for each object

Here you can find how to get it fixed

var js = {
  "columns": [{
      "title": "t1"
    },
    {
      "title": "t2"
    },
    {
      "title": "t3"
    },
    {
      "title": "t4"
    },
    {
      "title": "t5"
    }
  ],
  "rows": [
    [
      "t1row1",
      "t2row1",
      "t3row1",
      "t4row1",
      "t5row1"
    ],
    [
      "t1row2",
      "t2row2",
      "t3row2",
      "t4row2",
      "t5row2"
    ],
    [
      "t1row3",
      "t2row3",
      "t3row3",
      "t4row3",
      "t5row3"
    ]
  ]
};

let text = "<table border='1'>"
text += "<tr>";
for (let x in js.columns) {


  text += "<th>" + js.columns[x].title + "</th>";

}
text += "</tr>";

  for (var v in js.rows) {
    text += "<tr>";
    for ( var x in js.rows[v] ) {
      text += "<td>" + js.rows[v][x] + "</td>";
    }
    text += "</tr>";
  }


text += "</table>"
document.getElementById("demo").innerHTML = text;

<div id="demo"></div>

table element have specific method you should use : https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement

const js = 
  { columns: 
    [ { title: 't1' } 
    , { title: 't2' } 
    , { title: 't3' } 
    , { title: 't4' } 
    , { title: 't5' } 
    ] 
  , rows: 
    [ [ 't1row1', 't2row1', 't3row1', 't4row1', 't5row1' ] 
    , [ 't1row2', 't2row2', 't3row2', 't4row2', 't5row2' ] 
    , [ 't1row3', 't2row3', 't3row3', 't4row3', 't5row3' ] 
  ] };

const table = document.querySelector('#demo').appendChild(document.createElement('table'));

let
  tHead = table.createTHead() 
, tBody = table.createTBody() 
, rowX  = tHead.insertRow()
  ;
js.columns.forEach(({title}) => rowX.insertCell().textContent = title);
js.rows.forEach(arr =>
  {
  rowX  = tBody.insertRow();
  arr.forEach( txt => rowX.insertCell().textContent = txt );
  });

html {
  font-family     : Arial, Helvetica, sans-serif;
  font-size       : 16px;
  }
table {
  border-collapse  : separate;
  border-spacing   : 1px;
  background-color : darkblue;
  margin           : 1em;
  color            : black;
  }
table td {
  background-color : whitesmoke;
  padding          : .2em .6em;
  min-width        : 4.2em;
  text-align       : center;
  }
table thead td {
  padding          : .3em .6em;
  background-color : #3acec2;
  font-weight      : bold;
 }

<div id="demo"></div>

Please signup or login to give your own answer.

Click here to cancel reply.