What is json? - An Introduction

What is JSON?

JSON stands for Java Script Object Notation. It is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate. It is based on a subset of the JavaScript.

JSON is built on two structures:
- A collection of name/value pairs. In various languages, this is resemble as an object, record, struct, dictionary, hash table, keyed list, or associative array.

- An ordered list of values. In most languages, this is resemble as an array, vector, list, or sequence.

Example:

{
"employees": [
               { "firstName":"RK" , "lastName":"Singh" }, 
               { "firstName":"Sachin" , "lastName":"Kumar" }, 
               { "firstName":"Nitin" , "lastName":"Kumar" }
             ]
}

In the example above, the object 'employees' is an array containing three objects. Each object is a record of a person (with a first name and a last name).

Why we used JSON:

For ajax applications, JSON is faster and easier than XML

Using XML
- Fetch an XML document
- Use the XML DOM to loop through the document
- Extract values and store in variables

Using JSON
- Fetch a JSON string
- eval() the JSON string
 

JSON syntax rule:

- JSON syntax is a subset of the Java Script object notation syntax.
- Data is name value pairs.
- Data is separated by comma.
- Curly brackets holds objects.
- Square brackets holds arrays.

JSON Values:

- A number (Integer or floating point)
- A string (in double quotes)
- A boolean (true false)
- An array (In square brackets)
- An object (In curly brackets)
- null

JSON Uses JavaScript Syntax:

With JavaScript you can create an array of objects and assign data to it like this:
 Eg.
        var employees = [
                                      { "firstName":"RK" , "lastName":"Singh" },
                                      { "firstName":"Sachin" , "lastName":"Kumar" },
                                      { "firstName":"Nitin" , "lastName": "Kumar" }
                                   ];

The first entry in the JavaScript object array can be accessed like this: employees[0].lastName;
The returned content will be: Kumar

JSON Files

- The file type for JSON files is '.json'
- The MIME type for JSON text is 'application/json'

Converting a JSON Text to a JavaScript Object

Create a JavaScript string containing JSON syntax:

var txt = '{ "employees" : [' +
'{ "firstName":"John" , "lastName":"Doe" },' +
'{ "firstName":"Anna" , "lastName":"Smith" },' +
'{ "firstName":"Peter" , "lastName":"Jones" } ]}';

Since JSON syntax is a subset of JavaScript syntax, the JavaScript function eval() can be used to convert a JSON text into a JavaScript object.

The eval() function uses the JavaScript compiler which will parse the JSON text and produce a JavaScript object. The text must be wrapped in parenthesis to avoid a syntax error:

var obj = eval ("(" + txt + ")");

Use the JavaScript object in your page:
<p>
First Name: <span id="fname"></span><br />
Last Name: <span id="lname"></span><br />
</p>

<script type="text/javascript">
document.getElementById("fname").innerHTML = obj.employees[1].firstName
document.getElementById("lname").innerHTML = obj.employees[1].lastName
</script>

Here is the another example of Using jQuery to Read a JSON Feed.