Skip to content

Commit 356a67e

Browse files
doreydorey
committed
json2table initial commit. functional demo
0 parents  commit 356a67e

File tree

4 files changed

+163
-0
lines changed

4 files changed

+163
-0
lines changed

‎README

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
Converts a JSON structure into a table with simple css classes.
2+
3+
The difficult part is getting the 'rowspan' attribute to match the number
4+
of children to be displayed. If this value is off, it shifts values all
5+
over the place.

‎index.html

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2+
"http://www.w3.org/TR/html4/loose.dtd">
3+
4+
<html lang="en">
5+
<head>
6+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
7+
<title>JSON-2-Table</title>
8+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
9+
<script src="json2table.js" type="text/javascript" charset="utf-8"></script>
10+
<link rel="stylesheet" href="simple-table-styling.css" type="text/css" media="all" charset="utf-8">
11+
</head>
12+
<body>
13+
<script type="text/javascript" charset="utf-8">
14+
<!--
15+
16+
var testData = {
17+
'row1': {
18+
'key1': 'val1',
19+
'key2': 'val2'
20+
},
21+
'row2': {
22+
'key1': 'val23',
23+
'key2': 'val34'
24+
},
25+
'row3': {
26+
'sub-row1': {
27+
'key3': 'val45',
28+
'key4': 'val56'
29+
},
30+
'sub-row2': {
31+
'key5': 'val67',
32+
'key6': 'val78'
33+
}
34+
}
35+
};
36+
37+
$.json2table(testData, "testData").appendTo("body");
38+
39+
-->
40+
</script>
41+
</body>
42+
</html>

‎json2table.js

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
(function($){
2+
//Holds hierarchical structure with added class methods.
3+
var JsonTableObject = function(name, data){
4+
if('undefined'==typeof data) {
5+
return false;
6+
} else {
7+
var _t = new JsonTableObject;
8+
_t.__name__ = name;
9+
$.each(data, function(k, v){
10+
if($.type(v)==='string' || $.type(v)==='number' || $.type(v)==='null') {
11+
_t[k] = new JsonTableKeyValue(k, v);
12+
} else if($.type(v)==='object') {
13+
_t[k] = new JsonTableObject(k, v);
14+
} else { /*-- console.log($.type(v)) --*/ }
15+
});
16+
return _t;
17+
}
18+
};
19+
JsonTableObject.prototype = new Object();
20+
$.extend(JsonTableObject.prototype, {
21+
childCount: function(){
22+
var count = 0;
23+
$.each(this, function(k, v){
24+
if(v instanceof JsonTableObject) {
25+
count += v.childCount();
26+
} else if(v instanceof JsonTableKeyValue) {
27+
count++;
28+
}
29+
});
30+
return count;
31+
},
32+
td: function(){
33+
return $("<td />", {rowspan: this.childCount(), 'class': 'children'}).html(Deslug(this.__name__, this));
34+
},
35+
getTable: function(){
36+
var table = $("<table />"),
37+
tr = $("<tr />");
38+
function getTds(oa) {
39+
tr.append(oa.td());
40+
$.each(oa, function(k, v){
41+
if(v instanceof JsonTableObject) {
42+
getTds(v);
43+
} else if(v instanceof JsonTableKeyValue) {
44+
tr.append(v.keyTd())
45+
.append(v.valTd());
46+
table.append(tr);
47+
tr = $("<tr />");
48+
}
49+
});
50+
}
51+
getTds(this);
52+
return table;
53+
}
54+
})
55+
56+
//Holds lowest-level of Json hierarchy -- key/value pairs
57+
var JsonTableKeyValue = function(name, __value__){
58+
this.__name__ = name;
59+
this.__value__ = __value__ || "";
60+
this.length = this.__value__.length;
61+
};
62+
with(JsonTableKeyValue.prototype = new String) {
63+
toString = valueOf = function(){return this.__value__};
64+
}
65+
$.extend(JsonTableKeyValue.prototype, {
66+
keyTd: function(){return $("<td />", {'class':'key'}).html(Deslug(this.__name__, this));},
67+
valTd: function(){return $("<td />", {'class':'val'}).html(this.__value__);}
68+
});
69+
70+
var Deslug = function(str, cntxt){
71+
return function(i, html) {return str;}
72+
}
73+
$.setJson2tableDeSlugger = function(cb){if($.type(cb)==='function') Deslug = cb;}
74+
75+
$.json2table = function(json, name) {
76+
var name = name || 'Root'
77+
return new JsonTableObject(name, json).getTable();
78+
};
79+
})(jQuery)

‎simple-table-styling.css

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
table {
2+
border-spacing: 0px;
3+
vertical-align: top;
4+
}
5+
table td {
6+
vertical-align: top;
7+
padding: 2px 10px;
8+
}
9+
table tr:first-child td:first-child {
10+
border-left: 1px solid #888;
11+
}
12+
td.key:after {
13+
content: ':';
14+
}
15+
td.key {
16+
text-align: right;
17+
}
18+
td.key {
19+
padding-right: 1px;
20+
border: 0 none;
21+
}
22+
td.val {
23+
color: #f00;
24+
border: 0 none;
25+
}
26+
td.key, td.val {
27+
border-top: 1px solid #bbb;
28+
border-bottom: 1px solid #bbb;
29+
}
30+
td.val {
31+
border-right: 1px solid #bbb;
32+
}
33+
td.children {
34+
border-right: 2px solid #888;
35+
border-top: 1px solid #bbb;
36+
border-bottom: 1px solid #bbb;
37+
}

0 commit comments

Comments
 (0)