Articles → Jquery → Read JSON Data Using Jquery

Read JSON Data Using Jquery

In this article I will explain how to read JSON data using jQuery.

Software Requirement

Before you start reading this tutorial you should make sure that

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

Prerequisite Knowledge

Before you go ahead, it is required that you should know

Basics about HTML
Basics about JQuery
Basics about JSON.

Steps Of Execution

In this tutorial I will execute certain steps for the demonstration of reading JSON data from jQuery. These steps are

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

Let us execute each step

Create A New HTML File And Add Span Tags In It

First of all create a new HTML file and add 4 span tags inside the body tag.

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

The purpose of these 4 spans is to display name, age, technology and address and this information will be extracted from a variable having data in JSON format.

Add Javascript Code To Access JSON

First of all add a script tag having source equals to jquery-1.7.2.js. Secondly add another script tag in which we are calling the ready method of jQuery and inside the method we are reading data from a JavaScript variable having data in JSON format and assigning it to spans (which we have created in the last section)

<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

Click to Enlarge

Posted By -	Karan Gupta

Posted On -	Sunday, September 15, 2013

Query/Feedback

Your Email Id		**

Subject		*

Query/Feedback	Characters remaining 250	**