How to read external JSON file in Jquery AJAX

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 Excel in ASP.NET MVC
Export-data-into-Excel

In this example we learn how to export the data into MS Excel in ASP.NET MVC without using any 3rd Read more

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

CRUD Operation in ASP.NET Web API with Entity Framework
CRUD-Operation-in-asp.net-Web-api

This blog explain CRUD Operation in ASP.NET Web API with Entity framework and then the web API check using POSTMAN Read more

Worker Service in .NET Core
worker-service

A worker service is a .NET project built using a template which supplies a few useful features that turn a Read more

Pin It on Pinterest