What is JSON? Definition and uses in JavaScript

Recently JSON has become a very popular data interchange format with more and more developers and a large number of big players in the web arena opting for it over XML.  In this article we will explore what json is all about and how we can use it. We will proceed in the following manner:

  • Definition, Characteristics and Structure of json

  • Example

  • Parsing json text

  • Reading values from json

Let’s go through each of these one by one.

Definition, Characteristics and Structure of json

JSON which stands for JavaScript Object Notation can be defined as a lightweight data interchange format. It is also said a fat-free lightweight alternative to xml. It is a text format which is programming language independent and is native data form of JavaScript. It is lighter and faster than xml. The credit to make json popular goes to Douglas Crockford.

Since JSON is the native data form of JavaScript, it can be used on the client side in an Ajax application more easily then XML. Implementations of JSON has been done in most of the languages (check here) we will stick to javascript as of now.

A JSON object starts with { and ends with }.  In between you can have key value pairs which are enclosed with double quotes (“) and separated by a colon (:).

Keys are simple strings and values can be either array, string, number or Boolean. Values enclosed between { and } are objects and those between [ and ] are arrays.

Example

A JSON can be as simple as

{
“name”:”name1”, “age”:”25”, ”address”: "anywhere"
}

Example 1
An example using arrays

{
"name": "name1", "age":"25", "phoneNumbers": ["9999123456", "9999678900","1234567890" ]
}

Example 2
A more complex example which has values in objects and objects are array elements.

{
"results":
 {
   "students":
   [
     {
      "id" : "1",
      "name": "Ramu"
     },
     {
      "id": "2",
      "name": "Shyamu"
     },
     {
      "id" : "3",
      "name": "Damu"
     }
   ]
 }
}

Example 3

Those familiar with JavaScript will see that syntax is same we use while declaring objects in JavaScript.In the above example we have a json where results is the key and its value is an object.


The value for results again contains an object which has the value students. The value of students is an array ( note the [ ). This array contains 3 values which are again objects. The first one is

{
      "id" : "1",
      "name": "Ramu",
}

This object has 2 keys, id and name. The value for key id is 1 and the value for key name is Ramu.

Parsing json text

Now suppose you received a json string as responseText in an Ajax application. You will now want to read the values that this structure has brought with it and use them in your application. But wait  - there is one more step in between and that is parsing of this text.

Why do I have to parse it ??

Since JSON is a text format, we will have to parse it to a format that JavaScript can recognize and read upon. We can use eval to parse it.

var myJsonObject = eval( ' ( ' + JsonString + ' ) ' );

This will convert the string JsonString to a javascript object. Now you have an object available in javascript. You are free to do whatever with its values.

One word of caution. Use of eval is not recommended since eval is considered evil. This is because eval can execute any javascript code that is passed to it. So better use a JSON parser. It will make sure that the json string passed to it is thoroughly checked and scripts are rejected. I personally use json.js ( now json2) by Douglas Crockford.

var myJsonObject = JsonString.parseJSON();

Reading values from json

After a json string is successfully parsed, you can use it like a normal javascript variable. Here we will try to read values from the structure in example 3. This structure holds the records of 3 students.

Suppose we have the parsed object in variable studentRecords.

studentRecords.results will give an object. studentRecords.results.students will give the array that has 3 records. Now we can iterate over this array and get values.

var rec = studentRecords.results.students;
for(var i=0; i<rec.length; i++)
{
   var aStudent = rec[i];
   alert(aStudent.id);
   alert(aStudent.name);
}

With this we come to the end of this article. If you have any queries or suggestions, do tell me.

You can see a complete working example with the json string of example 3 here.

--