
<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>
