Download Json array as File using Jquery

Download Json array as File using Jquery

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

Download Json array as File using Jquery

How to read external JSON file in Jquery AJAX

In this article we discuss read external JSON file in Jquery Ajax. If you are new to Jquery then please explore our Jquery Series. There are many ways to store JSON data in our application. We can store JSON in an array or in an external file. There are many ways to read JSON data from external files, here we see how it be done using Jquery Ajax.

What is Ajax ?

Ajax is a set of web development techniques using many web technologies on the client side to create asynchronous web applications. With Ajax, web applications can send and retrieve data from a server asynchronously without interfering with the display and behavior of the existing page.

Let’s you have a external JSON file named as sample.json and it holds the JSON value like below;

{"first_name" : "John", "last_name" : "Smith", "location" : "USA"}

How to read JSON file in Jquery AJAX

Here let’s create a HTML and use Jquery Ajax to read the json.

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $.ajax({
            type: "GET",
            url: "./json/sample.json",
            success: function (response) {
                console.log(response)
                $("div").append("First Name : " + response.first_name+ "<br/>Last Name : " +response.last_name+ 
                                   "<br/> Address : "   + response.location);
            }
        });
    </script>
<body>
    <div></div>
</body>
</head>
</html>

Code Explanation

On the above we create a AJAX method to read the external JSON fileby passing in the ajax URL. After getting response print the result in the DIV tag. Also if we open the browser console window you can see the output like below;

After run the application you can see the output like below;

Read external JSON file using Jquery AJAX

Conclusion

This article explained how to use external Json file in Jquery Ajax. If have any suggestion about this article please give your feedback.

Export data into PDF in ASP.NET MVC
Export-Data-into-PDF-SERVICE

In this example we use Dapper ORM to fetch the data from database and using the data we export into Read more

Pin It on Pinterest