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.
This question is related to
javascript
html
json
html-table
I have rewritten your code in vanilla-js, using DOM methods to prevent html injection.
var _table_ = document.createElement('table'),_x000D_
_tr_ = document.createElement('tr'),_x000D_
_th_ = document.createElement('th'),_x000D_
_td_ = document.createElement('td');_x000D_
_x000D_
// Builds the HTML Table out of myList json data from Ivy restful service._x000D_
function buildHtmlTable(arr) {_x000D_
var table = _table_.cloneNode(false),_x000D_
columns = addAllColumnHeaders(arr, table);_x000D_
for (var i = 0, maxi = arr.length; i < maxi; ++i) {_x000D_
var tr = _tr_.cloneNode(false);_x000D_
for (var j = 0, maxj = columns.length; j < maxj; ++j) {_x000D_
var td = _td_.cloneNode(false);_x000D_
cellValue = arr[i][columns[j]];_x000D_
td.appendChild(document.createTextNode(arr[i][columns[j]] || ''));_x000D_
tr.appendChild(td);_x000D_
}_x000D_
table.appendChild(tr);_x000D_
}_x000D_
return table;_x000D_
}_x000D_
_x000D_
// Adds a header row to the table and returns the set of columns._x000D_
// Need to do union of keys from all records as some records may not contain_x000D_
// all records_x000D_
function addAllColumnHeaders(arr, table) {_x000D_
var columnSet = [],_x000D_
tr = _tr_.cloneNode(false);_x000D_
for (var i = 0, l = arr.length; i < l; i++) {_x000D_
for (var key in arr[i]) {_x000D_
if (arr[i].hasOwnProperty(key) && columnSet.indexOf(key) === -1) {_x000D_
columnSet.push(key);_x000D_
var th = _th_.cloneNode(false);_x000D_
th.appendChild(document.createTextNode(key));_x000D_
tr.appendChild(th);_x000D_
}_x000D_
}_x000D_
}_x000D_
table.appendChild(tr);_x000D_
return columnSet;_x000D_
}_x000D_
_x000D_
document.body.appendChild(buildHtmlTable([{_x000D_
"name": "abc",_x000D_
"age": 50_x000D_
},_x000D_
{_x000D_
"age": "25",_x000D_
"hobby": "swimming"_x000D_
},_x000D_
{_x000D_
"name": "xyz",_x000D_
"hobby": "programming"_x000D_
}_x000D_
]));Check out JSON2HTML http://json2html.com/ plugin for jQuery. It allows you to specify a transform that would convert your JSON object to HTML template. Use builder on http://json2html.com/ 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
http://plugins.jquery.com/jput/
<script>
$(document).ready(function(){
var json = [{"name": "name1","email":"[email protected]"},{"name": "name2","link":"[email protected]"}];
//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 id="tbody">
</tbody>
</table>
Source: Stackoverflow.com