JSON Viewer Tool
JSON Viewer Tool
Load JSON
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
}
.container {
max-width: 800px;
margin: auto;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
}
textarea {
width: 100%;
height: 200px;
margin-bottom: 10px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-family: monospace;
}
button {
display: block;
width: 100%;
padding: 10px;
background-color: #28a745;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #218838;
}
.json-output {
margin-top: 20px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
background: #f9f9f9;
max-height: 400px;
overflow-y: auto;
white-space: pre-wrap;
}
document.getElementById('loadJson').addEventListener('click', function() {
const jsonInput = document.getElementById('jsonInput').value;
let jsonData;
try {
jsonData = JSON.parse(jsonInput);
displayJson(jsonData);
} catch (error) {
alert('Invalid JSON: ' + error.message);
document.getElementById('jsonOutput').innerHTML = '';
}
});
function displayJson(data) {
const output = document.getElementById('jsonOutput');
output.innerHTML = '';
output.appendChild(createTree(data));
hljs.highlightBlock(output);
}
function createTree(data) {
const container = document.createElement('div');
if (typeof data === 'object' && data !== null) {
const list = document.createElement('ul');
for (const key in data) {
const listItem = document.createElement('li');
const keyElement = document.createElement('span');
keyElement.className = 'key';
keyElement.textContent = key + ': ';
listItem.appendChild(keyElement);
if (typeof data[key] === 'object' && data[key] !== null) {
const childContainer = createTree(data[key]);
childContainer.style.display = 'none';
listItem.appendChild(childContainer);
keyElement.addEventListener('click', () => {
const isVisible = childContainer.style.display === 'block';
childContainer.style.display = isVisible ? 'none' : 'block';
});
} else {
const valueElement = document.createElement('span');
valueElement.className = 'value';
valueElement.textContent = JSON.stringify(data[key]);
listItem.appendChild(valueElement);
}
list.appendChild(listItem);
}
container.appendChild(list);
} else {
container.textContent = JSON.stringify(data);
}
return container;
}
Manhunt Underway for Suspect in Active Shooter Situation That Shuts Down I-75 in Kentucky In a shocking turn of events, authorities in K...
No comments:
Post a Comment