-
Notifications
You must be signed in to change notification settings - Fork 53
/
index.html
80 lines (54 loc) · 2.06 KB
/
index.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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Online JSON to Tree Diagram Converter</title>
<link rel="stylesheet" href="css/vtree.css" type="text/css"/>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="dist/vtree.js"></script>
<!-- How to use debug mode.
1. open browser's developer tools.
2. input the following command.
vt.debug(true).update()
-->
<script type="text/javascript">
var vt;
window.onload = function () {
var container = document.getElementById("container");
var msg = document.getElementById("msg");
vt = new VTree(container);
var reader = new VTree.reader.Object();
function updateTree() {
var s = document.getElementById("from-text").value;
msg.innerHTML = '';
try {
var jsonData = JSON.parse(s);
} catch (e) {
msg.innerHTML = 'JSON parse error: ' + e.message;
}
var data = reader.read(jsonData);
vt.data(data)
.update();
}
document.getElementById("go-button").onclick = updateTree;
updateTree();
};
</script>
</head>
<body>
<div class="container">
<h1>Online JSON to Tree Diagram Converter</h1>
<p style="text-align: right;"><a href="https://github.com/ivan111/vtree">github</a></p>
<p>converts JSON strings into tree diagrams. For example, it is used to show AST(Abstract Syntax Tree) as tree diagrams for debugging. In such case, of course, you need to translate AST into JSON.</p>
<div style="margin-top: 1em;">
<textarea id="from-text" rows="6" cols="80">[{ "array": [ 1, 2, 3 ], "boolean": true, "null": null, "number": 123, "object": { "a": "b", "c": "d", "e": "f" }, "string": "Hello World" }, { "|": "|", " ": { "ʕ": "" }, " ": ["◕", [ { "hello! ": "<ﾆフ" } ], "◕"], "_": { "": "ʔ" } }]</textarea>
</div>
<div style="margin-top: 1em;">
<input id="go-button" type="button" value="Visualize">
</div>
<div id="msg" style="color: red;"></div>
<div id="container"></div>
<p style="text-align: right;">Created Date: 2014-07-27, Modified Date: 2017-03-18</p>
</div>
</body>
</html>