Welcome Learner today in this blog post we will be building a JSON file compressor web app in JS. All the Complete source code of the application is shown Down.

 

lets Started

 

In sequence to get begun, you require to make an index.html file and copy-paste the following code.

index.html

h1>JSON Compressor</h1>
<input type="file" accept=".json" />
<pre></pre>

<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js"></script>

Read: Kotlin Time Date picker Dialog using JR TimeDate Picker Complet project

 

script.js

 

 


document.querySelector("input").onchange = function(evt) {
    try {
        var f = evt.target.files[0];
        var r = new FileReader();
        r.onload = function(e) {
            try {
                var contents = e.target.result;
                var name = f.name;
                saveAs(new Blob([JSON.stringify(JSON.parse(contents))], {
                    type: 'application/json'
                }), name);
            } catch (e) {
                document.querySelector("pre").textContent = e.stack;
            }
        };
        r.readAsText(f);
    } catch (e) {
        document.querySelector("pre").textContent = e.stack;
    }
}

Leave a Comment

Your email address will not be published.