110 lines
4.5 KiB
PHP
110 lines
4.5 KiB
PHP
|
|
<section class="diZContainer diZmxAuto diZmy8">
|
|
<h1 class="diZBorderBottom">JSON Formatter</h1>
|
|
<div class="diZFlexRowCol">
|
|
<div class="diZw100 jsonCustomHeight diZFlexColumn diZJsonInputBorder diZBorderRadius5px diZmr2">
|
|
<textarea oninput="parseJSON()" id="jsonInput" class="diZJsonInput diZScrollBarNone" rows="40" placeholder="Enter JSON here"></textarea><br>
|
|
</div>
|
|
<div class="diZw100 jsonCustomHeight diZFlexColumn diZJsonInputBorder diZBorderRadius5px">
|
|
<div id="output" class="diZJsonViewer"></div>
|
|
</div>
|
|
</div>
|
|
<div class="diZFloatRight diZFlexRow diZJustifyCenter diZItemsCenter">
|
|
<p class=" diZJsonKey" id="countArray">Array Length: 0</p>
|
|
<button class="diZmt4 diZmb4 diZml2" onclick="copyToClipboard()"><span>Copy JSON</span></button>
|
|
<button class="diZmt4 diZmb4 diZml2" onclick="downloadJsonData()"><span>Download JSON</span></button>
|
|
</div>
|
|
|
|
</section>
|
|
<script>
|
|
function parseJSON() {
|
|
const input = document.getElementById('jsonInput').value;
|
|
const outputElement = document.getElementById('output');
|
|
outputElement.innerHTML = ''; // Clear previous output
|
|
|
|
try {
|
|
const parsedData = JSON.parse(input);
|
|
outputElement.appendChild(createTreeView(parsedData));
|
|
let totalObjects = parsedData.length;
|
|
document.getElementById('countArray').innerHTML = 'Array Length: '+ totalObjects;
|
|
} catch (error) {
|
|
outputElement.textContent = 'Error parsing JSON: ' + error.message;
|
|
}
|
|
}
|
|
|
|
function createTreeView(data) {
|
|
const container = document.createElement('div');
|
|
|
|
if (typeof data === 'object' && data !== null) {
|
|
const ul = document.createElement('ul');
|
|
ul.className = 'diZJsonUl';
|
|
for (const key in data) {
|
|
if (data.hasOwnProperty(key)) {
|
|
const li = document.createElement('li');
|
|
li.className = 'diZJsonLi';
|
|
const keySpan = document.createElement('span');
|
|
keySpan.className = 'diZJsonKey';
|
|
keySpan.textContent = `${key}: `;
|
|
|
|
const valueSpan = document.createElement('span');
|
|
if (typeof data[key] === 'object' && data[key] !== null) {
|
|
const childContainer = createTreeView(data[key]);
|
|
li.appendChild(keySpan);
|
|
li.appendChild(childContainer);
|
|
} else {
|
|
if (typeof data[key] === 'string') {
|
|
valueSpan.className = 'diZJsonString';
|
|
valueSpan.textContent = `"${data[key]}"`;
|
|
} else {
|
|
valueSpan.className = 'diZJsonValue';
|
|
valueSpan.textContent = data[key];
|
|
}
|
|
li.appendChild(keySpan);
|
|
li.appendChild(valueSpan);
|
|
}
|
|
ul.appendChild(li);
|
|
}
|
|
}
|
|
container.appendChild(ul);
|
|
} else {
|
|
const span = document.createElement('span');
|
|
if (typeof data === 'string') {
|
|
span.className = 'diZJsonString';
|
|
span.textContent = `"${data}"`;
|
|
} else {
|
|
span.className = 'diZJsonValue';
|
|
span.textContent = data;
|
|
}
|
|
container.appendChild(span);
|
|
}
|
|
|
|
return container;
|
|
}
|
|
|
|
function copyToClipboard() {
|
|
const input = document.getElementById('jsonInput').value;
|
|
navigator.clipboard.writeText(input).then(() => {
|
|
console.log('JSON copied to clipboard!');
|
|
}, (err) => {
|
|
console.log('Failed to copy JSON: ', err);
|
|
});
|
|
}
|
|
function downloadJsonData() {
|
|
const jsonData = document.getElementById('jsonInput').value;
|
|
let jsonObject;
|
|
try {
|
|
jsonObject = JSON.parse(jsonData);
|
|
} catch (error) {
|
|
console.log('Invalid JSON data');
|
|
return;
|
|
}
|
|
const jsonString = JSON.stringify(jsonObject, null, 2);
|
|
const blob = new Blob([jsonString], { type: 'application/json' });
|
|
const downloadLink = document.createElement('a');
|
|
downloadLink.href = URL.createObjectURL(blob);
|
|
downloadLink.download = 'json-data.json';
|
|
downloadLink.click();
|
|
URL.revokeObjectURL(downloadLink.href);
|
|
}
|
|
</script>
|