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

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 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>   

 

Ebook Download
View all
Learn
View all