Articles → Jquery → 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

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

    <h2>Reading student information from json data</h2>
    <span id="nameperson"></span>
    <br />
    <span id="ageperson"></span>
    <br />
    <span id="technologyspan"></span>
    <br />
    <span id="addressspan"></span>
    <br />

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;


Picture showing the output of reading json data in jquery
Click to Enlarge

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


Your Email Id  
Query/FeedbackCharacters remaining 250