Skip to content

Commit c080a34

Browse files
author
Dominik Herbst
committed
Allow undefined and any types
1 parent 98618ff commit c080a34

File tree

14 files changed

+2671
-2583
lines changed

14 files changed

+2671
-2583
lines changed

‎docs-src/demo.ts‎

Lines changed: 33 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,20 @@ const demoData = {
1515
},
1616
element7: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
1717
},
18+
jsData: {
19+
element1: 'str',
20+
element2: 1234,
21+
element3: [23, 43, true, false, null, { name: 'special' }, {}],
22+
element4: [],
23+
element5: 'this should be some long text\nwith line break',
24+
element6: {
25+
name: 'Hero',
26+
age: 32,
27+
birthday: { year: 1986, month: 4, day: 30 }
28+
},
29+
element7: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
30+
element8: { un: undefined, nu: null }
31+
},
1832
largeData: (function() {
1933
const list = new Array(Math.floor(Math.random() * 1000));
2034
for (let i = 0; i < list.length; i++) {
@@ -51,7 +65,7 @@ querySelectorArray('[data-load]').forEach((link: any) => {
5165
link.loadListener = true;
5266
link.addEventListener('click', e => {
5367
e.preventDefault();
54-
loadStructureData(demoData[load]);
68+
loadStructureData(demoData[load], load === 'jsData');
5569
});
5670
}
5771
});
@@ -95,14 +109,21 @@ searchElement.addEventListener('input', async e => {
95109

96110
loadStructureData(demoData.simpleData);
97111

98-
async function loadStructureData(structure) {
99-
const text = JSON.stringify(structure, null, 2);
100-
codeElement.value = text;
101-
await showData(text);
112+
async function loadStructureData(structure, jsData = false) {
113+
if (jsData) {
114+
codeElement.style.display = 'none';
115+
await showData(structure, jsData);
116+
} else {
117+
const text = JSON.stringify(structure, null, 2);
118+
codeElement.style.display = '';
119+
codeElement.value = text;
120+
await showData(text, jsData);
121+
}
122+
102123
showPaths();
103124
}
104125

105-
async function showData(data: string) {
126+
async function showData(data: any, jsData = false) {
106127
const index =
107128
'showDataIndex' in viewerElement
108129
? ++viewerElement['showDataIndex']
@@ -114,7 +135,12 @@ async function showData(data: string) {
114135
viewer.destroy();
115136
}
116137
try {
117-
const _viewer = await BigJsonViewerDom.fromData(data);
138+
let _viewer;
139+
if (jsData) {
140+
_viewer = await BigJsonViewerDom.fromObject(data);
141+
} else {
142+
_viewer = await BigJsonViewerDom.fromData(data);
143+
}
118144
if (viewerElement['showDataIndex'] !== index) {
119145
_viewer.destroy();
120146
return;

‎docs-src/index.html‎

Lines changed: 65 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,78 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<title>Big JSON Viewer Demo</title>
6-
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
7-
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
8-
<link rel="stylesheet" href="../styles/default.css">
9-
<style type="text/css">
10-
body {
11-
font-family: Helvetica, serif;
12-
}
13-
</style>
14-
</head>
15-
<body>
16-
<div class="p-3" style="position: fixed; top: 0; right: 0; background: white; border: 1px solid #ccc">
17-
<input type="text" placeholder="Search" id="search">
18-
<span id="searchInfo"></span>
19-
</div>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Big JSON Viewer Demo</title>
6+
<link
7+
rel="stylesheet"
8+
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
9+
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
10+
crossorigin="anonymous"
11+
/>
12+
<link rel="stylesheet" href="../styles/default.css" />
13+
<style type="text/css">
14+
body {
15+
font-family: Helvetica, serif;
16+
}
17+
</style>
18+
</head>
19+
<body>
20+
<div
21+
class="p-3"
22+
style="position: fixed; top: 0; right: 0; background: white; border: 1px solid #ccc"
23+
>
24+
<input type="text" placeholder="Search" id="search" />
25+
<span id="searchInfo"></span>
26+
</div>
2027

21-
<div class="container">
22-
<h1 class="mt-3">Big JSON Viewer Demo</h1>
28+
<div class="container">
29+
<h1 class="mt-3">Big JSON Viewer Demo</h1>
2330

24-
<p>
25-
Watch large JSON structures in the Browser.<br>
26-
<a href="https://github.com/dhcode/big-json-viewer">On GitHub</a>
27-
</p>
31+
<p>
32+
Watch large JSON structures in the Browser.<br />
33+
<a href="https://github.com/dhcode/big-json-viewer">On GitHub</a>
34+
</p>
2835

36+
<h4 class="mt-3">JSON text</h4>
37+
<div>
38+
<a href="javascript:" data-load="simpleData">Simple test data</a> |
39+
<a href="javascript:" data-load="largeData">Large data</a> |
40+
<a href="javascript:" data-load="jsData">JavaScript data</a>
41+
</div>
2942

30-
<h4 class="mt-3">JSON text</h4>
31-
<div>
32-
<a href="javascript:" data-load="simpleData">Simple test data</a> |
33-
<a href="javascript:" data-load="largeData">Large data</a>
34-
</div>
43+
<div>
44+
<textarea
45+
id="code"
46+
style="min-height: 15em; width: 100%; font-family: monospace, serif; font-size: 0.8em"
47+
></textarea>
48+
</div>
3549

36-
<div>
37-
<textarea id="code"
38-
style="min-height: 15em; width: 100%; font-family: monospace, serif; font-size: 0.8em"></textarea>
39-
</div>
50+
<h4 class="mt-3">Big JSON Viewer output</h4>
4051

41-
<h4 class="mt-3">Big JSON Viewer output</h4>
52+
<div id="viewer"></div>
4253

43-
<div id="viewer">
44-
</div>
54+
<h5 class="mt-3">Open paths</h5>
55+
<div>
56+
<textarea
57+
id="paths"
58+
style="min-height: 6em; width: 100%; font-family: monospace, serif; font-size: 0.8em"
59+
></textarea>
60+
</div>
4561

46-
<h5 class="mt-3">Open paths</h5>
47-
<div>
48-
<textarea id="paths"
49-
style="min-height: 6em; width: 100%; font-family: monospace, serif; font-size: 0.8em"></textarea>
50-
</div>
62+
<h5 class="mt-3">Copied paths</h5>
63+
<div>
64+
<input
65+
type="text"
66+
id="copied"
67+
style="width: 100%; font-family: monospace, serif; font-size: 0.8em"
68+
/>
69+
</div>
5170

52-
<h5 class="mt-3">Copied paths</h5>
53-
<div>
54-
<input type="text" id="copied" style="width: 100%; font-family: monospace, serif; font-size: 0.8em">
55-
</div>
71+
<footer class="mt-5">
72+
Created by <a href="https://github.com/dhcode">Dominik Herbst</a>
73+
</footer>
74+
</div>
5675

57-
58-
<footer class="mt-5">
59-
Created by <a href="https://github.com/dhcode">Dominik Herbst</a>
60-
</footer>
61-
</div>
62-
63-
<script src="demo.ts"></script>
64-
65-
</body>
76+
<script src="demo.ts"></script>
77+
</body>
6678
</html>

‎docs/default.f39b0572.css‎ renamed to ‎docs/default.0c758eda.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/default.f39b0572.map‎ renamed to ‎docs/default.0c758eda.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)