How to read JSON data from External File

In this article we will understand how we can read JSON data from a external file.JSON is short for JavaScript Object Notation, and is a way to store information in an organized, easy-to-access manner .One of the easiest ways to load JSON data into our web applications is to use jQuery.getJSON().For this we have to understand the term “jQuery.getJSON()” .

So what is significance of jquery.getJSON?????….

jQuery.getJSON()

It loads JSON data from the  server using GET HTTP request .

Picture1

Now to understand how to use the getJSON function to read json data we will make a sample project

  • Create a new project in Visual Studio .
  • Add new item -> HTML page .
  • Create a new JSON file and add it to your project.

Json4

 

  • So here, we use a for statement and created a variable called output to temporarily store the data.
  • Once we go through all of the elements in the array, we use the output variable to populate the placeholder div.
<html>
<head>
<title></title>
</head>
<body>
<div id="placeholder"></div>
<script src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script>
 $.getJSON('data.json', function(data){
var output = "<ul>";
for (var i in data.users) { 
 output += "<li>" + data.users[i].EmployeeID + " " + data.users[i].Name + " " + data.users[i].Joining.month + "</li>"
}
 output += "</ul>";
 document.getElementById("placeholder").innerHTML = output;
});
</script>
</body>
</html>

 

Happy Coding !!

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *