Convert a JSON Doc or JSON-Schema into a HTML Table
<!-- JS-Code taken from https://gist.github.com/fbstj/1199018 -->
<!-- See live demo at: https://jsfiddle.net/peLjkfrm/3/ -->
<style>
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
</style>
<div id="mytab"></div>
<script>
const schema = {
"$schema": "http://json-schema.org/draft-04/schema#",
"type": "object",
"title": "Book",
"properties": {
"id": {"type": "string"},
"title": {"type": "string"},
"author": {"type": "string"},
"year": {"type": "integer"},
"publisher": {"type": "string"},
"website": {"type": "string"},
"subDoc": {
"type": "object",
"properties": {
"internal": {
"type": "object",
"properties": {
"ean": {
"type": "integer"
},
"sn": {
"type": "string"
}
},
"required": [
"ean"
]
}
},
"required": [
"internal"
]
}
},
"required": ["id", "title", "author", "year", "publisher", "subDoc"]
};
function HTMLON(o, e) {
function ne(name) {
return $(document.createElement(name));
}
function nr(i, v) {
return ne('tr').append(ne('th').text(i)).append(HTMLON(v, ne('td')));
}
if ($.isArray(o)) {
var ul = ne('ul');
$.each(o, function(i, v) {
ul.append(HTMLON(v, ne('li')));
});
e.append(ul);
}
else if (typeof o == 'object') {
var t = ne('table');
$.each(o, function(i, v) {
t.append(nr(i, v));
});
e.append(t);
}
else if(typeof o == 'function')
{
e.append(ne('code').text(o.toString()));
}
else {
e.text(o);
}
return e;
}
HTMLON(schema, $('#mytab'));
</script>