In this article we are going to discuss how to download JSON array as File using Jquery. In some scenario we need to download json file in browser itself, top follow this article we will discuss how easily we do it. Please go though our previous article of Jquery How to read external JSON file in Jquery AJAX.

Find the source code

What We do here ?

In this example we create a JSON object then convert it into a JSON String and then to BLOB object, then downloaded as Text file from Browser using jQuery.

HTML Markup

Here we simply create a HTML page and create a button and on the button onclick() event we call the javascript function and there create a dummy json array and download the file.

<input type="button" value="Download Json" onclick="DownloadJson()" />

Downloading JSON array as File using jQuery

The JSON string is converted into a BLOB object which is later downloaded as text file using jQuery. The blow are the Javascript function that call when button Onclick() method is called.

<script src="https://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
        function DownloadJson() {
            var studentList = [
                { "Name": "John", "score": "30" },
                { "Name": "Rozi", "score": "40" },
                { "Name": "Peter", "score": "50" },
                { "Name": "Finch", "score": "60" },
                { "Name": "Ravi", "score": "70" }
            ];
            //Convert JSON Array to string.
            var json = JSON.stringify(studentList);
            var blob = new Blob([json]);
            var link = document.createElement('a');
            link.href = window.URL.createObjectURL(blob);
            link.download = "studentList.txt";
            link.click();
        }
    </script>

Code Explanation

  • Here we create a dummy student list.
  • Then it convert to Json string then it store as blob object
  • Finally using anchor tag we download with help of javascript.

download json array using jquery-Json list
download json array using jquery-download result

Find the Source Code

Conclusion

So far this article we discuss how to download JSON array as File using Jquery. In the above example we simply create a dummy Json array then it convert into string and blob then using javascript we can download the text file. If have any suggestion for improvement then please free to write us.

How to read external JSON file in Jquery AJAX
Javascript-Jquery-Ajax

This article explain how to read external json file. There are many ways to store JSON data in our application. Read more

Pin It on Pinterest

Share This