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.
Table of Contents
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;
Conclusion
This article explained how to use external Json file in Jquery Ajax. If have any suggestion about this article please give your feedback.
In this example we learn how to export the data into MS Excel in ASP.NET MVC without using any 3rd Read more
In this example we use Dapper ORM to fetch the data from database and using the data we export into Read more
This blog explain CRUD Operation in ASP.NET Web API with Entity framework and then the web API check using POSTMAN Read more
A worker service is a .NET project built using a template which supplies a few useful features that turn a Read more