Dynamically generate table from json array in javascript

Question

I have a JSON data as shown below. I need to generate a table from this JSON using javascript. The hardest part for me is to show the each element as a column. Please help me to resolve it.

JSON:

[
 {
   "Header": "Column1",
   "Values": [
     "75",
     "79",
     "83"
   ]
 },
 {
   "Header": "Column2",
   "Values": [
     "77",
     "81",
     "86",
     "90"
   ]
 },
 {
   "Header": "Column3",
   "Values": [
     "98",
     "117"
   ]
 }
]

I want to show this data in below table format

|Column1|Column2|Column3|
-------------------------
| 75 | 77 | 98  |
| 79 | 81 | 117 |
| 83 | 86 |     |
|    | 90 |     |

What will be the best way to achieve it?

... an HTML table? Or what?

J.N.
– J.N.

2017-05-04 07:03:25 +00:00
Commented May 4, 2017 at 7:03 — J.N.
– J.N., Commented May 4, 2017 at 7:03
Yes.. i want to build an html table

kalaimani
– kalaimani

2017-05-04 07:05:41 +00:00
Commented May 4, 2017 at 7:05 — kalaimani
– kalaimani, Commented May 4, 2017 at 7:05

Nina Scholz · Accepted Answer · 2017-05-04 08:15:14Z

You could get first the headers of the table and while iterating the column names, you could collect the length of every data array and take the max length of it for later iterating the td elements.

var data = [{ Header: "Column1", Values: ["75", "79", "83"] }, { Header: "Column2", Values: ["77", "81", "86", "90"] }, { Header: "Column3", Values: ["98", "117"] }],
    table = document.createElement('table'),
    tr = document.createElement('tr'),
    rows = [],
    max = 0,
    i;

table.appendChild(tr);
data.forEach(function (o) {
    var th = document.createElement('th');
    th.appendChild(document.createTextNode(o.Header));
    tr.appendChild(th);
    max = Math.max(max, o.Values.length);
});
for (i = 0; i < max; i++) {
    tr = document.createElement('tr'),        
    table.appendChild(tr);
    data.forEach(function (o) {
        var td = document.createElement('td');
        tr.appendChild(td);
        td.appendChild(document.createTextNode(i in o.Values ? o.Values[i] : ''));
    });
}
document.body.appendChild(table);

dev8080 · Accepted Answer · 2017-05-04 07:36:12Z

You'll have to use DOM methods and nested for loops to achieve this.

var tableJSON = [
 {
   "Header": "Column1",
   "Values": [
     "75",
     "79",
     "83"
   ]
 },
 {
   "Header": "Column2",
   "Values": [
     "77",
     "81",
     "86",
     "90"
   ]
 },
 {
   "Header": "Column3",
   "Values": [
     "98",
     "117"
   ]
 }
];

var tableDiv = document.createElement("table");
 var trElement =  document.createElement("tr");
 tableDiv.appendChild( trElement );

var prDiv = document.getElementById("pr");
tableJSON.forEach(function(a_column, index){
if(a_column.Header)
	{
  var tdElement =  document.createElement("td");
  tdElement.innerHTML = "<b>" + a_column.Header + "</b>";
  trElement.appendChild( tdElement );
  }
  if(a_column.Values){
  var allRows = tableDiv.childNodes;
  
  for(var i=0 ;i< a_column.Values.length; i++)
  {
  var rowWanted = allRows[i+1];
  if( !rowWanted )
  {
  	rowWanted = document.createElement("tr");
   	tableDiv.appendChild( rowWanted );
  }
  if(rowWanted.childNodes.length==0)
  	for(var j=0; j< tableJSON.length; j++){
    rowWanted.appendChild( document.createElement("td") );
    }
  
  rowWanted.childNodes[ index ].innerHTML = a_column.Values[i];
  }
}
});
prDiv.appendChild(tableDiv);

<div id="pr">


</div>

gabriel · Accepted Answer · 2017-05-04 07:22:13Z

0

Loop through your array of objects in order to create the first row (headers) of your table.

Then loop again for every row of your table and only access the first element of each Values array everytime. You can achieve that using var nb = theArray.shift(). This will remove the first element of the array. So if it returns something, that is what you want to add in your table row, otherwise nothing. When all arrays are empty you are done.

But keep in mind shift() will remove the value from the array (you call JSON). So you might want to perform a copy first (see slice()).

answered May 4, 2017 at 7:22

gabriel

1782 silver badges9 bronze badges

Comments

Akash · Accepted Answer · 2017-05-04 07:51:19Z

0

This is how you can start it. 1.Iterate through the data and collect the headers, make the HTML for the th here.

2.Iterate through the data and collect the row entries, make the HTML for tr here.

Code :

    var data = [{
        "Header": "Column1",
        "Values": [
            "75",
            "79",
            "83"
        ]
    }, {
        "Header": "Column2",
        "Values": [
            "77",
            "81",
            "86",
            "90"
        ]
    }, {
        "Header": "Column3",
        "Values": [
            "98",
            "117"
        ]
    }];

    var table_headers = "<tr>";
    for(var i=0;i<data.length;i++){
        table_headers = table_headers + "<td>" + data[i].Header + "</td>";
    }
    trs = trs + "</tr>";

    var table = document.createElement('table');
    table.innerHTML = table_headers;

Now you have the headers ready similarly iterate and collect the data and append the entire table to the body of your HTML.

This is one way I could think of. See if this helps.

Note: Search a bit for similar problems before posting, there may be ideas that could bring you to your solution. :)

answered May 4, 2017 at 7:51

Akash

1213 bronze badges

1 Comment

kalaimani Over a year ago

Hi, Thanks for your answer, I had a similar solution like iterating all the objects and rows. But it has nested loops. so trying to get more effective approach.

muhammad faizan altaf · Accepted Answer · 2017-05-04 07:38:14Z

Try this code! this will help you to generate output that you need.

<div id="tables">

</div>
<script type="application/javascript"> 

    var jsonStr = '[{"Header": "Column1","Values": ["75","79","83"]},{"Header": "Column2","Values": ["77","81","86","90"]},{"Header": "Column3","Values": ["98","117"]}]';
    var parsJson = JSON.parse(jsonStr);
    var output = '';
    for (var i = 0; i < parsJson.length; i++) {
        output += '<table border="1" style="float:left"><tr><td>' + parsJson[i]['Header'] + '</td></tr>';
        for (var j = 0; j < parsJson[i]['Values'].length; j++) {
            output += '<tr><td>' + parsJson[i]['Values'][j] + '</td></tr>';
        }
        output += '</table>';
        console.log(output);
        document.getElementById('tables').innerHTML = output;
    }
</script>

Collectives™ on Stack Overflow

Dynamically generate table from json array in javascript

5 Answers 5

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related