JSON - beautifier and minifier

Dec 03, 2016 JavaScript Tool

A small tool to beautify or minify JSON data.

The tool

This tool uses JSON.parse to read the value from the textarea inputs and renders it with the function JSON.stringify into the other textarea input.

JavaScript

Here the small JavaScript and unstyled HTML code behind it.

<textarea id="beautified"></textarea>
<button onclick="minifyJSON();">minify</button>
<textarea id="minified"></textarea>
<button onclick="beautifyJSON();">beautify</button>
<script>
var beautified = document.getElementById("beautified");
var minified = document.getElementById("minified");
function minifyJSON() {
    try {
        minified.value = JSON.stringify(JSON.parse(beautified.value));
    } catch (e) {
        handleError(e);
    }
}

function beautifyJSON() {
    try {
        beautified.value = JSON.stringify(JSON.parse(minified.value), null, "    ");
    } catch (e) {
        handleError(e);
    }
}

function handleError(error) {
    console.log(error);
}
</script>