Articles → JSON → Read JSON Data Using Jquery

Read JSON Data Using Jquery






Software requirement




  1. Any text editor like notepad is there on your machine.
  2. Any browser like I.E, chrome etc is installed on your machine.
  3. JQuery file (1.7.2) uncompressed downloaded from http://jquery.com/download/

Prerequisite knowledge




  1. Basics about HTML
  2. Basics about JQuery
  3. Basics about JSON.

Steps of execution




  1. Create a new HTML file and add span tags in it.
  2. Add JavaScript code to access JSON



Create a new HTML file and add span tags in it




<body>
    <h2>Reading student information from json data</h2>
    Name: 
    <span id="nameperson"></span>
    <br />
    Age: 
    <span id="ageperson"></span>
    <br />
    Technology: 
    <span id="technologyspan"></span>
    <br />
    Address: 
    <span id="addressspan"></span>
    <br />
</body>





Add JavaScript code to access JSON




<script src="jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	var Trainer = {
		"Name": "Karan Gupta",
		"Age": 28,
		"Technology": "JSON",
		"Address": {
			"City": "Gurgaon",
			"State": "Haryana"
		}
	};
	document.getElementById("nameperson").innerHTML = Trainer.Name;
	document.getElementById("ageperson").innerHTML = Trainer.Age;
	document.getElementById("technologyspan").innerHTML = Trainer.Technology;
	document.getElementById("addressspan").innerHTML = Trainer.Address.City;
});       
</script>



Output


Picture showing the output of reading json data in jquery

Click to Enlarge


Posted By  -  Karan Gupta
 
Posted On  -  Sunday, September 15, 2013

Query/Feedback


Your Email Id  
 
Subject 
 
Query/FeedbackCharacters remaining 250