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.

    <script src=""></script>
            type: "GET",
            url: "./json/sample.json",
            success: function (response) {
                $("div").append("First Name : " + response.first_name+ "<br/>Last Name : " +response.last_name+ 
                                   "<br/> Address : "   + response.location);

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


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

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

Share This