-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
106 lines (104 loc) · 4.62 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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css" />
</head>
<body>
Enter or paste JSON here and press Show
<div>
<textarea id="jsonData" style="width: 50em; height: 10%; max-width: 100%"></textarea>
<button onclick="showJsonData()">Show</button>
<span id="parseError" style="color: darkred;"></span>
</div>
<script type="text/javascript">
function showJsonData() {
var json;
try {
json = JSON.parse(document.getElementById('jsonData').value);
document.getElementById('parseError').textContent = '';
}
catch (e) {
document.getElementById('parseError').textContent = e.message;
return;
}
var tree = createJsonTreeDom(json, true);
var holder = document.getElementById('test');
holder.removeChild(holder.querySelector('*'));
holder.appendChild(tree);
}
</script>
<p>It can handle relatively large JSONs.</p>
<p>Ctrl/Meta + click expands or collapses the whole branch.</p>
<p>
Hover node name and click
<span style="display:inline-block;
background-color: #eee;
text-align: center;
width: 1.4em;
line-height: 1.4em;
box-shadow: 0 0 2px;
border-radius: 0.2em;">📋</span>
to copy subtree contents.
</p>
<p>Hover strings with escaped symbols (<code>\" \\ \b \f \n \r \t \uhhhh</code>) to see a tooltip with contents in human readable form.</p>
<p>
Filtering:
<ul>
<li>enter regex to filter items</li>
<li>press "Expand filtered items" button or <code>Enter</code> while editing to expand filtered items and exit filtering mode</li>
</ul>
</p>
<div>
<button onclick="for (var e of document.querySelectorAll('#test li.folder')) e.classList.remove('folded')">Expand all</button>
<button onclick="for (var e of document.querySelectorAll('#test li.folder')) e.classList.add('folded')">Collapse all</button>
<button onclick="for (var e of document.querySelectorAll('#test .tree > ul > li.folder')) e.classList.remove('folded')">Expand level 1</button>
<button onclick="for (var e of document.querySelectorAll('#test .tree > ul > li.folder')) e.classList.add('folded')">Collapse level 1</button>
</div>
<div>
<label for="filter">Filter:</label>
<input id="filter" type="text" placeholder="enter regex"
oninput="filter(this.value)"
onkeypress="if (event.key == 'Enter') exapandFilteredItems(document.getElementById('test'))" />
<button onclick="exapandFilteredItems(document.getElementById('test'))">Expand filtered items</button>
<span id="regexpError" style="color: darkred;"></span>
<script type="text/javascript">
function filter(pattern) {
var errorMsgElement = document.getElementById('regexpError');
errorMsgElement.textContent = '';
filterItems(pattern, document.getElementById('test'), errorMsg => errorMsgElement.textContent = errorMsg);
}
</script>
</div>
<div id="test" style="margin: 1em; border: 1px solid gray;"></div>
<script type="text/javascript" src="scripts.js"></script>
<script type="text/javascript">
var json = {
"null": null,
"boolean": true,
"number 1": 1,
"number 2": 1.5,
"string": "bleh!",
"escaped string": "blah blah\n\ttabbed text\n\"\\\nblah\ntext\bbackspace\ntext\fform feed\ntext\rcarriage return\nunicode text: \u20AC \u00A3 \u00A5",
"JSON escapes and HTML symbols": "html special symbols:\n&<>'\"",
"object": {
"value 1": 42,
"value 2": 3.14592654,
"value 3": "foobar",
"subobject": {
"value1": 1,
"value2": 2,
"value3": 3
},
"long string with formatting": "text\ntext\ntext\ntext\ntext\ntext\ntext\ntext\ntext\ntext\ntext\ntext\ntext\ntext\ntext\ntext\ntext\ntext\ntext\ntext\ntext"
},
"array": [
1, 2, 3.3, "string", { "value": 42 }
],
"a": [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,]
};
var tree = createJsonTreeDom(json, true);
document.getElementById('test').appendChild(tree);
</script>
</body>
</html>