What is JSON

Dhananjay Kumar
Jul 10, 2013
10.4k
0
0
Article

What is JSON?

For some of you this question might be the easiest to answer. But for many developers the concept of JSON is not well understood. In my seminars when I use JSON data for demonstrations, I find many developers do not have an understanding of JSON. In this article I will try to address this problem.

In simple words, "JSON is a data interchange format. Due to its lightweight characteristics it is being highly used to exchange data among various platforms and applications".

A simple JSON data representing Students can be like the following:

You can see that a JSON object follows the key-value pair format, as described in the following:

The key shouldalways be a string
The value may be a string, number, Boolean or an object

You can represent a collection in JSON as well. That can be represented as an array of JSON objects.

Information about many Students can be displayed in JSON format as in the following:

You can have JSON objects as values of another JSON object as well.

Now let us see how we can work with JSON in JavaScript. Let us say we have a HTML page as in the following snippet:

<body>
<h2>Reading Student information from JSON data</h2>
Name : <span id="namespan"></span> <br />
Marks : <span id ="marksspan"></span><br />
Addreess : <span id="addresssapn"></span> <br />
</body>

In JavaScript we have JSON data and we need to bind the values of JSON into the HTML elements. We can do that very simply as in the following snippet:

<head>
   <title></title>
   <script src="Scripts/jquery-1.7.1.js"></script>
   <script type="text/javascript" >
$(document).ready(function () {
      var Student = {
"name": "dj",
   "marks": 89,
   "address":
{
   "city": "Pune",
   "country": "India"
}
};

document.getElementById('namespan').innerHTML = Student.name;
document.getElementById('marksspan').innerHTML = Student.marks;
document.getElementById("addresssapn").innerHTML = Student.address.city;
});