JSON is short for JavaScript Object Notation and is a way of storing information in an organized and easily accessible.

var wcVenuThomas = {
    "age" : "28",
    "hometown" : "Cochin, Kerala, India",
    "gender" : "male"
};

At first glance you get a very clear and that helps your understanding. In this example we have defined a small JSON object called wcVenuThomas composed of a series of attributes. In this way, we can subsequently use to follow the following structure.

alert("Venu Thomas is " + wcVenuThomas.age );

Functions (not to carry information)

Thanks to the versatility of the variables in JavaScript it is possible to match one of these attributes to a function, creating a method of the object itself:

var wcVenuThomas = {
    "age" : "28",
    "hometown" : "Cochin, Kerala, India",
    "gender" : "male"
    "salute" : function(strString) {
    	alert("hello, " + strString + "! I'm Venu Thomas from " + this.hometown + ", How are you?");
    },
};

Now you can salute()

 var usrName = "John James"
wcVenuThomas.salute(usrName);

As part of the JSON object, we can make use of the attributes from the same method by using this operator.

The functions do not make sense to use JSON as a conveyor of information, so we leave it alone as a curious object notation

Arrays

Another option to the JSON is the ability to insert arrays as attributes and in turn define elements within JSON:

var wcVenuThomas = {
    "age" : "28",
    "hometown" : "Cochin, Kerala, India",
    "gender" : "male"
    "salute" : function(strString) {
    	alert("hello I'm Venu Thomas from " + this.hometown + ", How are you? " + strString + "?");
    },
    "projects":[
    	{
    		"name" : 	"Apple News and Analytics ",
    		"url"		 : 	"http://apple.wisecodes.com"
    	},
    	{
    		"name" :	"Life Style Blog",
    		"url"		 :  "http://telegraph.wisecodes.com"
    	}
    ]
};

In this way we can travel an arrays are:

var projects = wcVenuThomas.projects, html = '';
for (var x = 0 ; x < projects.length ; x++) {
html += '<li><a href="' + projects[x].url + '">' + projects[x].name + '</a></li>';
}

JSON object chaining

Another way of grouping elements is to use JSON JSON objects embedded within other objects JSON:

var wcVenuThomas = {
    "age" : "28",
    "hometown" : "Cochin, Kerala, India",
    "gender" : "male"
    "salute" : function(strString) {
    	alert("hello I'm Venu Thomas from " + this.hometown + ", How are you? " + strString + "?");
    },
    "projects":{
    	"applenews": {
    		"url"		 : 	"http://apple.wisecodes.com"
},
  	  "lifestyleblog": {
    		"url"		 :  "http://telegraph.wisecodes.com"
}
    }
};

As we can see, really the only thing we have done is to insert an object into a JSON attribute father, so we can access it as follows:

var URL = wcVenuThomas.projects.applenews.url;

Practical uses

As data storage system, is ideal for transporting from one page to another, even a website to another. A very simple and is used to obtain data from Flickr using jQuery to get data.

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",
        function(data){
          $.each(data.items, function(i,item){
            $("<img/>").attr("src", item.media.m).appendTo("#images");
            if ( i == 3 ) return false;
          });
        });

In this example, taken from the documentation of jQuery, as we launched a call for the latest images sent to Flickr that have been scheduled with the tag “Cat”. The result will be evaluated and processed to the end to reach us within data, a variable that can go as if we were talking about a variable.

Native JSON

One of the problems encountered with JSON is the assessment of code, since it must be transformed into a variable to use, and this requires the use of eval() which makes the process time is increased considerably .

// Eval
var myObject = eval('(' + myJSONtext + ')');

// Native JSON
var myObject = JSON.parse(myJSONtext);

// Mix
var myObject = (JSON)?JSON.parse(myJSONtext): eval('(' + myJSONtext + ')');

Fortunately, modern browsers (IE8, FF3.5, WebKit, ….) Features are implemented to forget eval() and improve the process time.

Share on Facebook

Tags: JAVASCRIPT, JSON, Learn

This entry was posted on Monday, August 24th, 2009 and is filed under JAVASCRIPT.