It’s a bird; it’s a plane, its JSON
A few months ago, I suddenly came across (actually tripped over) a word flying through the web – JSON. It’s pronounced the way it is written, but for people like me who’re trying to figure out how it is pronounced, its Jason. The name is fancy and friendly enough to catch one’s attention.. something like, “Hey JSON, what’s up today?”
Getting into the matter and keeping things short, JSON stands for JavaScript Object Notation. It’s an extremely simple way to represent objects that contain name-value pairs. Here’s a plain example:
{
“myself”:{
“profile”:[
“name”: “Clark Kent”,
“profession”: “Flying Around”
]
}
}As of now, all you intelligent readers must have guessed what this thing is actually trying to say. The parent object is
myself, which contains a child object
profile. Now
profile contains a list of keys:
name and
profession, and their corresponding values.
So, now you must have got an idea as to how a JSON text looks like. Let’s add a little extra to it:
{
“messengers”:{
“yahoo”:[
“username”: “cooldude”,
“password”: “p@$$w0rd”
],
“google”:[
“username”: “cooldude001”,
“password”: “$ecr3t”
]
}
}The above example shows the parent object messengers containing two children – yahoo and google.
Things to be noted here:
- The curly brackets ({}) are the containers and they group together a set of related items.
- The square brackets {[]} are the array holders.
- Name-value pairs are separated by colons.
- All array elements and name-value pairs are separated by commas.
And now you can very well understand what the above JSON structure describes.
But beware! Professional programmers use even more complicated JSON structures for their application; not intending to say that they deliberately make it complicated, just that their complex application requires it. It’s a common practice to have nested JSON structures. Let’s have a look at it:
{“myself”:{“profile”:[“name”: “Clark Kent”,
“profession”: “Flying Around”, “messengers”: {“messengers”:{
“yahoo”:[“username”: “cooldude”,“password”: “p@$$w0rd”],
“google”:[ “username”: “cooldude001”,“password”: “$ecr3t”]}}]
}}Assuming that you have not fainted yet and are still in your senses, lets try to understand what the above structure represents. Let me make it pretty for you:
{
“myself”:{
“profile”:[
“name”: “Clark Kent”,
“profession”: “Flying Around”,
“messengers”: {
“messengers”:{
“yahoo”:[
“username”: “cooldude”,
“password”: “p@$$w0rd”
],
“google”:[
“username”: “cooldude001”,
“password”: “$ecr3t”
]
}
}
]
}
}So, now you find that this structure is a combination of the previous two structures. There is an extra key-value pair added to the profile of some Mr. Clark Kent.
Lesson to be learnt: You may not always get a pretty JSON structure :-). The ones sent/received by applications over the internet are generally compacted to save bandwidth usage. So before giving up on a JSON structure, be sure to arrange them properly to get a clear understanding of its meaning.
Ok, so what do I do with Mr. JSON?
There are pretty interesting things that you can do with JSON texts. You can parse them in JavaScript and even use them in AJAX calls.
Let’s see how we can use it in JavaScript. Let’s take the simplest example for a clear understanding. You can then build stuff over it yourself:
var myJSON = {
“messengers”:{
“yahoo”:[
“username”: “cooldude”,
“password”: “p@$$w0rd”
],
“google”:[
“username”: “cooldude001”,
“password”: “$ecr3t”
]
}
};The above statement declares a JSON object myJSON. Now to access any object inside it, you can simply do a:
var yahooUser = myJSON.messengers[0].username;
var yahooPwd = myJSON.messengers[0].password;
Or, you can use a simple loop to iterate through the values:
for(var z = 0; z<myJSON.messengers.length; z++){
alert(“User: ” + myJSON.messengers[z].username +
“, Password: ” + myJSON.messengers[z].password);
}
This will show all the usernames and passwords in the JSON object in an alert dialog.
JSON with AJAX? Sounds Cool..
AJAX (ah, yet another divine technology) too uses JSON. The idea is to prepare the information in JSON format and send it across through AJAX calls. When received at the client end you just need to convert the JSON text into a JSON object using the friendly neighborhood
eval() function.
But there is a catch in this methodology. My friends, who managed to stay awake during the Application Security presentation that I gave a few months ago, would be able to understand it better. There is something called as XSS (Cross Site Scripting). And blindly trying to
eval() a received text can become a high security loop-hole. I’ll discuss it in details in some another article.
But as of now, if the JSON object is being received as a text from some external source, then it is highly recommended that JSON parsers should be used:
var myObject = myJSONtext.parseJSON(filter);
The optional parameter, filter, is actually a function that you’ll have to provide. This function will be called for each key-value pair in the JSON text. You might want to use it to alter the values depending on some conditions:
myData = text.parseJSON(function (key, value) {
return key.indexOf('date') >= 0 ? new Date(value) : value;
});
On one hand where you can convert a string to JSON, you can also have a JSON object converted to string:
var myJSONText = myObject.toJSONString();
Nearly Done
JSON is new technology that is catching up quite fast. Some people say that it is an appropriate replacement for XML. Its quite easy to write and understand extremely easy to use. In XML where you need to load a document, painfully loop through it to extract the values before you can use it; in JSON, you just need the JSON string and eval() it.
All in all, JSON is a technology that is sure to make life easy. Using all the above mentioned information, I am sure that you are now pretty much prepared to face JSON in the real world.. :-)
PS: Please do post any corrections for the article that you might find. Suggestions are always welcome.
