How to import data from a json file and parse it JavaScript to Display the Content

Introduction

 
The jQuery.getJSON( url, [data], [callback] ) method loads JSON data from the server using a GET HTTP request.
 
The method returns XMLHttpRequest object.
 
Syntax
 
Here is the simple syntax to use this method:
$.getJSON( url, [data], [callback] )
 
Here is the description of all the parameters used by this method:
  • url: A string containing the URL to which the request is sent
  • data: This optional parameter represents key/value pairs that will be sent to the server.
  • callback: This optional parameter represents a function to be executed whenever the data is loaded successfully.
Example
 
Assuming we have following JSON content in names.txt file with json format content:
 
 
Following is a simple example of a simple showing the usage of this method.
 
 
And Save this text file as JSONExample.html.
 
Click on the button to load result.html file:
 
 
Names.txt file code
  1. {  
  2.      "employees":   
  3.      [  
  4.          {  
  5.              "firstName""Gowtham ",  
  6.              "lastName""Rajamanickam"  
  7.          },  
  8.          {  
  9.              "firstName""Kiruthiga",  
  10.              "lastName""Balasubramanian"  
  11.          },  
  12.          {  
  13.              "firstName""Siva",  
  14.              "lastName""Natesan"  
  15.          }  
  16.      ]  
  17.  }  
JsonExample.html file code
  1. <html>  
  2.     <head>  
  3.         <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>  
  4.         <script type="text/javascript">  
  5.   
  6.         $(function(){  
  7.         $.getJSON('names.txt',function(data){  
  8.         $.each(data.employees,function(i,emp){  
  9.         $('ul').append('  
  10.             <li>'+emp.firstName+' '+emp.lastName+'</li>');  
  11.         });  
  12.         }).error(function(){  
  13.         console.log('error');  
  14.         });  
  15.         });  
  16.         </script>  
  17.     </head>  
  18.     <body>  
  19.         <ul></ul>  
  20.     </body>  
  21. </html>