Json – JavaScript Standard Object Notation
Jun 7th, 2009 | By admin | Category: Java ScriptWhen we send a request to the server , we expect a response. When we make an Ajax call to server with the help of XMLHttpRequest ,we have an option to get the response in many different formats. It can be a plain text , CSV(comma separated) , Xml etc. If the return data from the server is smple text , the way to retrieve is as simple as doing
responseVal = response.responseText
If response is in the form of Xml ,
responseVal = response.responseXML
or an object then? Manipulating response always takes some extra effort .

Image Details object
Refer to the image above . Lets assume we have an ImageDetails Object which has the properties lke ,image id,image description and the resource urls to get the resources(images in this case).When we send a request to the server , saying getImageDetails , we get an object in respose which has all the details of the image (day , id , description and the url to get it).
If the response object is in CSV format , JavaScript have to use a string manipulation method like split()
to return the string into individual data.
imageDetails = response.split(",");
With XML response , we would get a DOM representation of the text using the request object’s responseXML property.Then we have to use all the DOM mechanisms to work with the object , instead of actual property names.
Here we ca think of something called JSON , i.e JavaScript Standard Object otation.If you need to represent object in your JavaScript, then you should look at Json.When you get Json data from server, you are just getting text which can be easily converted into a JavaScript Object. then you can use dot notation to access the propertirs(fields) of an object like, var imageId = imageDetailsObj.id; When server sends a Json data , the data comes to you as a text , so , it is easy to get the response data using responseText propery of the request object. var jsonata = request.responseText; Lets see , how a Json data look like ,
imageDetails = {"id" : "roseImage",
"description" : "Rose is red",
"resources":["http://www.etechGuide.in/",
"http://www.roseValie.com"]}
Json data is enclosed within curly braces : {json data}. The above imageDetails is an Json object(enclosed in curly braces) consists of two Json String , “id”:”roseImage” and “description”:”Rose is red”. The imageDetails json object has an array which is enclosed in quare braces:[json array]. Each json string is a key-value pair , like , id : roseImage etc.
Once we get the Json object in response text , we have to evaluate the Json text to convert into a java script object. JavaScript provides a very strong method called eval(); which helps us to convert the Json text into a object form. If you pass a text to the eval method , JavaScript would run the statement and give back the result. Hence ,
var imageDetails = request.responseText;
imageDetails = eval('(' + imageDetails + ')');
would convert the servers response into an object. Once the eval() executed , you can access the object property directly as , imageDetails.id , imageDetails.description , imageDetails.resources. You can get all the image resource urls as,
for(var i=0; i<imageDetails.resources.length; i++) {
var resource = itemDetails.resources[i];
}
Calling eval(); does a lot to evaluate the Json data but we need some more steps to make sure the following things are takes care.
1. A malicious script is not there in our Json data coming from the server.
2. The Json data coming from the server is well-json-formatted.
A simple eval(); can not do all the above. We need a parser to do so. Fortunately http://www.json.org provides a Json parser that does all the above.You can download the script from json.org named json2.js and then use the following command to parse Json-formatted data ,
var imageDetails = JSON.parse(request.responseText);
The JSON object is created when json2.js is loaded by the web browser.parse() method takes the string as an input and return the an object if the input string is a valid Json-formatted data. So it’s always good to use JSON.parse(String) instead of eval().
