-
Notifications
You must be signed in to change notification settings - Fork 0
/
jsonviewer.html
87 lines (82 loc) · 2.64 KB
/
jsonviewer.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE HTML>
<html>
<head>
<title>JSON Viewer</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src='json2.js'></script>
<script type="text/javascript">
var colorstr = function (obj) {
var str = "";
if (obj == null) {
return "<font color='#999900'>null</font>";
}
if (typeof obj == "string") {
var escstr = obj.replace(/</g, '<');
escstr = escstr.replace(/>/g, '>');
str += "<font color='green'>\"" + escstr + "\"</font>";
} else if (typeof obj == "object") {
str += goin(obj);
} else {
var color = "black";
if (typeof obj == "number") {
color = "magenta";
} else if (typeof obj == "boolean") {
color = "#999900";
} else if (typeof obj == "number") {
color = "magenta";
}
str += "<font color='" + color + "'>" + obj + "</font>";
}
return str;
};
var goin = function (obj) {
var str = "";
for (var key in obj) {
str += "<li><font color='blue'>\"" + key + "\"</font>:";
if (obj[key] == null) { // null
str += colorstr(obj[key]);
} else if (typeof obj[key] == "object") {
if (obj[key].length != null) { // array
str += "[<ul>\n";
for (var k in obj[key]) {
str += "<li>" + colorstr(obj[key][k]) + "</li>";
}
str += "</ul>]\n";
} else { // object
str += goin(obj[key]);
}
} else {
str += colorstr(obj[key]);
}
str += "</li>\n";
}
return "<ul>\n" + str + "</ul>\n";
};
var parsejson = function () {
try {
var jstr = $('jsonstr').value;
var jobj = JSON.parse(jstr);
var str = goin(jobj);
$('jobjview').innerHTML = str;
} catch (err) {
$('jobjview').innerHTML = '<font color="red">' + err + '</font>';
}
};
var $ = function(id) {
return document.getElementById(id);
}
</script>
</head>
<body onload="$('jsonstr').focus();">
<h1>JSON Viewer</h1>
<table border='0' width='100%' cellpadding='3'>
<tr><th>JSON String</th><th>Object View</th></tr>
<tr>
<td width='40%' valign='top'><textarea id='jsonstr' style='width:100%;height:600px;' onkeyup='parsejson();'></textarea></td>
<td valign='top'><div id='jobjview'></div></td>
</tr>
</table>
<hr/>
Powered by CAQ, Nov 2011
</body>
</html>