Articles → JSON → Read JSON data using jQuery

Read JSON data using jQuery


















Software requirement











Prerequisite knowledge











Steps of execution











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