JSON for idiots

February 27th, 2008   Filed Under CSS, Javascript, Tips & Tricks, json, snippet  

Please forgive me for the title of this article. It doesn’t mean you are an idiot. And if you think you are … after reading this article you will not be one any more.

This is for all my friends who are into UI but don’t know the proper usage of JSON Object. Or the people who have heard about JSON but never been exposed to it.

JSON stands for Java Script Object Notation. JSON is a shorthand notation for declaring or constructing a custom object in Javascript.

“At first you must
Shake off the rust”

Let us be clear about what is an object in javascript. First question first… Can we create class, object etc in javascript?? Actually speaking “NO”. Javascript is not a Object Oriented Language. But it allows you to declare custom objects in addition to its primitive object types. So we can say that javascript is an object based language. So like other OO languages you cannot declare a class and then its constructor and then its object.

But what you can certainly do is, you can straight-away create a constructor which acts like a class and a constructor both.
So how can we create a class-constructor and instantiate an object out of it will be discussed some other time.

But for now we dig down to the definition of an object.
An object is an entity or collection of key & value pairs. A value can be of any kind of primitive data type. It can be even another object too.

Now I will cite an example of an object entity called “student”. We take a student whose name is Vivek and his age is 16 yrs.

So our object is having a key called “name” and the value for that key is “Vivek”. There is another key called age and the value of this key is “16″.

So if we translate that to JSON it becomes like this:

var student = {name: "Vivek", age:16};

So, if you need to access this object you say “Give me the student name and his age”.
And using javascript you translate it in the following syntax to alert one-by-one:

alert(student.name);
alert(student.age);

Now you feel like a programmer, isn’t it? Kewl.

Now lets check if we can go a bit more complex in it. The student has two phone numbers to get contacted. Actually he also has an email address. So if you create a category called “contacts” you can club all these items in it. So this also can become a key value pairs and hence, become an object:

What I mean is this:
var contacts = {landline: "918041278882", mobile: "919243176274", email: "vivek.pohre@gmail.com"};

But wait we actually wanted this to be a part of the student object… right? OK thats fair … we will push this to the student object.

So now after pushing the contacts to the student object, it looks like this:

var student = {// YOU CAN INFACT INDENT THE JSON OBJECT IN THIS WAY FOR BETTER READABILITY
name : "Vivek",
age : 16,
contacts :
{
landline: “918041278882″,
mobile : “919243176274″,
email : “vivek.pohre@gmail.com”
}
};

Wow, Now you know what is all that hi-fi code in the javascript libraries… hurray!!
OK but how do you access it again?
See how:

alert(student.contacts.landline);
alert(student.contacts.mobile);
alert(student.contacts.email);

So lets revisit the whole thing and use the technical terms to impress your colleagues:

I have an object called student which have different attributes(keys we say) like name, age, contacts and we can have some methods too for it. OK till attributes it was clear but what the well is method?

A method is a process which does something. What does it do? For example, if you want the student object to speak something about itself. Say when you command the student to speak it tells you his name, his age and his email id.

var student = {// YOU CAN INFACT INDENT THE JSON OBJECT IN THIS WAY FOR BETTER READABILITY
name : "Vivek",
age : 16,
contacts :
{
landline: "918041278882",
mobile : "919243176274",
email : "vivek.pohre@gmail.com"
},
speak: function()
{
alert(”My name is ” + this.name);
alert(”My age is ” + this.age);
alert(”My email id is ” + this.contacts.email)
}
};

OKAY… so now when you command by saying:
student.speak();

It throws 3 alerts which says My name is Vivek, My age is 16 and My email id is vivek.pohre@gmail.com.

Grreeeeeeeeeeat.

Have you ever heard people speaking about sending and receiving data in JSON using ajax?
So it is not so very big deal. You must be knowing that in ajax you get a string. Now if you assign this string to a temporary variable and evaluate it … you get a readymade object.

That means:
If you have a list of students on the HTML page and when a user clicks on a link. The interaction should be the speak command for that particular user.

Oho… how do you do that? Very simple… create an ajax call like this:

function commandStudent(name)
{
var returnText = ajax.gets("http://www.something.com/student?name=" + name);
if(returnText)
{
var tempStudent = eval(returnText);
tempStudent.speak();
}
}

Great man … now you are an ajax guru. Ask your manager to reevaluate your salary.

I ll explain sometime about how to send data from client side to the server using ajax and JSON.

“Your heart bears the fruit
When you go to the root”

Post Linx
Permalink | Trackback | | Print This Article |


Comments

Leave a Reply