Skip to content

Instantly share code, notes, and snippets.

@adamblank
Created January 26, 2014 19:35
Show Gist options
  • Save adamblank/8638085 to your computer and use it in GitHub Desktop.
Save adamblank/8638085 to your computer and use it in GitHub Desktop.
Generate generic HTML table from JSON
function generateTable(arr) {
var content = {},
headers = [],
longest = 0;
function setEmpies(content) {
for (var key in content) {
if (!content[key].affected) {
content[key].push('');
} else {
content[key].affected = false;
}
}
}
function addNulls(arr, num) {
var i = 0;
for (i; i<=num; i++) {
arr.push('');
}
}
function generateHTMLstring(headers, content, longest) {
var i = 0,
table = '';
for (i; i < longest; i++) {
var row = [];
headers.forEach(function(val) {
row.push(content[val][i]);
});
table += '<tr><td>' + row.join('</td><td>') + '</td></tr>';
}
return '<table><thead><tr><td>' + headers.join('</td><td>') + '</td></tr></thead><tbody>' + table + '</tbody></table>';
}
arr.forEach(function(val, idx) {
for (var key in val) {
if (!(key in content)) {
content[key] = [];
addNulls(content[key], idx);
}
content[key].push(val[key]);
content[key].affected = true;
}
setEmpies(content);
});
for (var key in content) {
headers.push(key);
if (content[key].length > longest) {
longest = content[key].length;
}
}
return generateHTMLstring(headers, content, longest);
}
//TEST
var arr = [{a: 'a1', b: 'b1'},
{a: 'a2', b: 'b2'},
{a: 'a3', b: 'b3'},
{a: 'a4', b: 'b4', c: 'c4'},
{a: 'a5', b: 'b5'},
{a: 'a6', b: 'b6', c: 'c6', d: 'd6'}];
document.body.innerHTML = generateTable(arr);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment