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?

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?

• javascript
• arrays
• json

• ... an HTML table? Or what? – J.N. Commented May 4, 2017 at 7:03
• Yes.. i want to build an html table – kalaimani Commented May 4, 2017 at 7:05

5 Answers 5

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);

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>

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()).

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. :)

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>