Convert json data to a html table [closed]
Sophia Terry 
Is there any jQuery or javascript library that generates a dynamic table given json data? I don't want to define the columns, the library should read the keys in the json hash and generate columns.
Of course, I can myself iterate through the json data and generate the html table. I just want to know if any such library exists which I can simply reuse.
44 Answers
Thanks all for your replies. I wrote one myself. Please note that this uses jQuery.
Code snippet:
var myList = [ { "name": "abc", "age": 50 }, { "age": "25", "hobby": "swimming" }, { "name": "xyz", "hobby": "programming" }
];
// Builds the HTML Table out of myList.
function buildHtmlTable(selector) { var columns = addAllColumnHeaders(myList, selector); for (var i = 0; i < myList.length; i++) { var row$ = $('<tr/>'); for (var colIndex = 0; colIndex < columns.length; colIndex++) { var cellValue = myList[i][columns[colIndex]]; if (cellValue == null) cellValue = ""; row$.append($('<td/>').html(cellValue)); } $(selector).append(row$); }
}
// Adds a header row to the table and returns the set of columns.
// Need to do union of keys from all records as some records may not contain
// all records.
function addAllColumnHeaders(myList, selector) { var columnSet = []; var headerTr$ = $('<tr/>'); for (var i = 0; i < myList.length; i++) { var rowHash = myList[i]; for (var key in rowHash) { if ($.inArray(key, columnSet) == -1) { columnSet.push(key); headerTr$.append($('<th/>').html(key)); } } } $(selector).append(headerTr$); return columnSet;
}<script src=""></script>
<body onLoad="buildHtmlTable('#excelDataTable')"> <table border="1"> </table>
</body>I have rewritten your code in vanilla-js, using DOM methods to prevent html injection.
var _table_ = document.createElement('table'), _tr_ = document.createElement('tr'), _th_ = document.createElement('th'), _td_ = document.createElement('td');
// Builds the HTML Table out of myList json data from Ivy restful service.
function buildHtmlTable(arr) { var table = _table_.cloneNode(false), columns = addAllColumnHeaders(arr, table); for (var i = 0, maxi = arr.length; i < maxi; ++i) { var tr = _tr_.cloneNode(false); for (var j = 0, maxj = columns.length; j < maxj; ++j) { var td = _td_.cloneNode(false); var cellValue = arr[i][columns[j]]; td.appendChild(document.createTextNode(arr[i][columns[j]] || '')); tr.appendChild(td); } table.appendChild(tr); } return table;
}
// Adds a header row to the table and returns the set of columns.
// Need to do union of keys from all records as some records may not contain
// all records
function addAllColumnHeaders(arr, table) { var columnSet = [], tr = _tr_.cloneNode(false); for (var i = 0, l = arr.length; i < l; i++) { for (var key in arr[i]) { if (arr[i].hasOwnProperty(key) && columnSet.indexOf(key) === -1) { columnSet.push(key); var th = _th_.cloneNode(false); th.appendChild(document.createTextNode(key)); tr.appendChild(th); } } } table.appendChild(tr); return columnSet;
}
document.body.appendChild(buildHtmlTable([{ "name": "abc", "age": 50 }, { "age": "25", "hobby": "swimming" }, { "name": "xyz", "hobby": "programming" }
]));Check out JSON2HTML plugin for jQuery. It allows you to specify a transform that would convert your JSON object to HTML template. Use builder on to get json transform object for any desired html template. In your case, it would be a table with row having following transform.
Example:
var transform = {"tag":"table", "children":[ {"tag":"tbody","children":[ {"tag":"tr","children":[ {"tag":"td","html":"${name}"}, {"tag":"td","html":"${age}"} ]} ]}
]};
var data = [ {'name':'Bob','age':40}, {'name':'Frank','age':15}, {'name':'Bill','age':65}, {'name':'Robert','age':24}
];
$('#target_div').html(json2html.transform(data,transform));You can use simple jQuery jPut plugin
<script>
$(document).ready(function(){
var json = [{"name": "name1","email":""},{"name": "name2","link":""}];
//while running this code the template will be appended in your div with json data
$("#tbody").jPut({ jsonData:json, //ajax_url:"youfile.json", if you want to call from a json file name:"tbody_template",
});
});
</script>
<table jput="t_template"> <tbody jput="tbody_template"> <tr> <td>{{name}}</td> <td>{{email}}</td> </tr> </tbody>
</table>
<table> <tbody> </tbody>
</table>
