-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
126 lines (105 loc) · 4.07 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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSON Tree Viewer</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</head>
<body>
<div class="container mt-4">
<h1 class="text-center">JSON Tree Viewer</h1>
<div class="text-center mt-3 d-none" id="spinner">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
<div id="msg" class="alert alert-warning alert-dismissible fade show d-none" role="alert">
<strong>Holy guacamole!</strong> Not JSON?
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<form id="json-form">
<div class="form-group mt-4">
<label for="json-input">Paste your JSON or text data:</label>
<textarea class="form-control" id="json-input" rows="6"></textarea>
</div>
<button type="submit" class="btn btn-primary mt-3">Submit</button>
</form>
<div class="mt-5" id="json-output">
<h3>Formatted JSON Tree:</h3>
<div id="json-tree"></div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<script>
// Create a tree structure from a JSON object
function createTree(obj, parent, level) {
if (!obj || !parent) {
// Invalid input, return early
return;
}
level = level || 0;
let ul = $('<ul class="list-unstyled">');
for (let key in obj) {
let li = $('<li>').addClass('mb-1').text(key);
ul.append(li);
if (typeof obj[key] === 'object') {
createTree(obj[key], $('<ul class="ms-3"></ul>').appendTo(li), level + 1);
} else {
li.append($('<span class="ms-3"></span>').text(': ' + obj[key]));
}
}
parent.append(ul);
// Set background color based on level
let color = 220 - (level * 20);
let bgColor = `rgba(${color}, ${color}, ${color}, 0.3)`;
parent.css('background-color', bgColor);
}
// Attempt to parse a JSON string, return false on failure
function tryParseJSON(jsonString) {
try {
const obj = JSON.parse(jsonString);
if (obj && typeof obj === 'object') {
return obj;
}
} catch (e) {
// Invalid JSON string
}
return false;
}
$(document).ready(function () {
// Add event listener to json-input
$('#json-input').on('input', function () {
$('#msg').addClass('d-none');
$('#json-output').hide();
$('#json-tree').empty();
});
// Handle form submission
$('#json-form').on('submit', function (e) {
e.preventDefault();
// Show loading spinner
$('#spinner').removeClass("d-none");
const input = $('#json-input').val();
const json = tryParseJSON(input);
if (json) {
// Hide loading spinner
$('#spinner').addClass("d-none");
// Show JSON tree
$('#json-output').show();
$('#json-tree').empty();
createTree(json, $('#json-tree'));
$('#json-tree').tree();
} else {
// Hide loading spinner
$('#spinner').addClass("d-none");
// Show error message
$('#msg').removeClass("d-none");
}
});
});
</script>
</body>
</html>