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?????….


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


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.



  • 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.
<div id="placeholder"></div>
<script src=""></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;


Happy Coding !!



Leave a Comment

Your email address will not be published.