Convert JSON data to HTML table using jQuery

by Leonardo Trimarchi

HTML

<span>JSON:</span>
<pre id="json"></pre>
<input type="button" id="btnConvert" value="Convert To Table" />

CSS

body {
  font-family: calibri;
}

span {
  font-weight: bold;
  margin-bottom: 5px;
  font-size: 18px;
  text-decoration: underline;
  color: blue;
}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
  margin-top:10px;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

th {
  background-color: #ccd;
}

tr:nth-child(even) {
  background-color: #ecf6fc;
}

tr:nth-child(odd) {
  background-color: #ddeedd;
}

JavaScript

var jData = '[{"fname":"Mark", "lname":"Wood", "company":"Apple"},' +
  '{"fname":"Steve", "lname":"Jones", "company":"Amazon"},' +
  '{"fname":"Bill", "lname":"Peterson", "company":"HP"},' +
  '{"fname":"Peter", "lname":"Jacobs", "company":"Dell"}]';


$('#json').html(jData);
$('#btnConvert').click(function() {
  ConvertToTable(jData);
});

$(function() {
	ConvertToTable(jData);
});

function ConvertToTable(jData) {
  var arrJSON = typeof jData != 'object' ? JSON.parse(jData) : jData;
  var $table = $('<table/>');
  var $headerTr = $('<tr/>');
  
  for (var index in arrJSON[0]) {
    $headerTr.append($('<th/>').html(index));
  }
  $table.append($headerTr);
  for (var i = 0; i < arrJSON.length; i++) {
   var $tableTr = $('<tr/>');
    for (var index in arrJSON[i]) {
      $tableTr.append($('<td/>').html(arrJSON[i][index]));
    }
    $table.append($tableTr);
  }
  $('body').append($table);
}