What is JSON: the 3 minute JSON Tutorial

http://www.secretgeek.net/json_3mins

If you are anything like me (and I fear that you are) then this is your experience with JSON so far:

Two months ago you’d never heard of JSON
One month ago you’d heard the term but paid no attention
One week ago you’d heard it mentioned a few times and started to think, right… some more crap to learn
Today you woke up with an alarm bell ringing in the back of your mind that said WHAT THE BLOODY HELL IS THIS JSON THING AND WHY IS IT EVERYWHERE ALL OF A BLOODY SUDDEN!
Well I had a slow bus ride home tonight (friday is always slow) and i took a pile of “JSON” tutorials with me. So now I can gently lead you through some BabySteps in JSON.

here we go…

What does JSON stand for?
JavaScript Object Notation.

[A ridiculous name. It should be called Lightweight Ecmascript Object Notation, or ‘LEON’ for short. ;-)]

And what does that mean?
JSON is a syntax for passing around objects that contain name/value pairs, arrays and other objects.

Here’s a tiny scrap of JSON:

{"skillz": {
    "web":[
        {"name": "html", 
         "years": "5"
        },
        {"name": "css", 
         "years": "3"
        }],
    "database":[
        {"name": "sql", 
         "years": "7"
        }]
}}

You got that? So you’d recognise some JSON if you saw it now? Basically:

Squiggles, Squares, Colons and Commas
Squiggly brackets act as ‘containers’
Square brackets holds arrays
Names and values are separated by a colon.
Array elements are separated by commas
Think ‘XML with Anorexia’
(Or if you’re as old as me, think “’.INI’ files, with hierarchy.”)

(Or if you’re a smug lisp weenie, think “S-expressions”, and just be smug.)

JSON is like XML because:
They are both ‘self-describing’ meaning that values are named, and thus ‘human readable’
Both are hierarchical. (i.e. You can have values within values.)
Both can be parsed and used by lots of programming languages
Both can be passed around using AJAX (i.e. httpWebRequest)
JSON is UNlike XML because:
XML uses angle brackets, with a tag name at the start and end of an element: JSON uses squiggly brackets with the name only at the beginning of the element.
JSON is less verbose so it’s definitely quicker for humans to write, and probably quicker for us to read.
JSON can be parsed trivially using the eval() procedure in JavaScript
JSON includes arrays {where each element doesn’t have a name of its own}
In XML you can use any name you want for an element, in JSON you can’t use reserved words from javascript
But Why? What’s good about it?
When you’re writing ajax stuff, if you use JSON, then you avoid hand-writing xml. This is quicker.

Again, when you’re writing ajax stuff, which looks easier? the XML approach or the JSON approach:

The XML approach:
bring back an XML document
loop through it, extracting values from it
do something with those values, etc,
versus
The JSON approach:
bring back a JSON string.
‘eval’ the JSON
So this is Object-Oriented huh?
Nah, not strictly.

JSON is about as object oriented as VB6. It provides a nice encapsulation technique, that you can use for separating values and functions out, but it doesn’t provide anything inheritence, polymorphism, interfaces, or OO goodness like that.

It is certainly a step in the right direction though, making javascript easier to maintain, share and reuse.

Thomas Frank wrote a nifty little javascript library called classyJSON for adding inheritance and scoping capabilities to JSON code.

And it’s just for the client-side right?
Yes and no. On the server-side you can easily serialize/deserialize your objects to/from JSON. For .net programmers you can use libraries like Json.net to do this automatically for you (using reflection i assume), or you can generate your own custom code to perform it even faster on a case by case basis.

Three minutes is nearly up….
As near as a I can tell, JSON was invented by a guy called Douglas Crockford. Read his website if you want, he’s pretty funny.

Now Go And Read Someone Who Knows
(Retrieved from Delicious using JSON!)

That’s all.
I’ve only tinkered with this stuff for a few minutes – so I’ve probably said some completely wrong things. If so, please leave a comment, telling me what an idiot i am. I’ll be happy to correct any specific mistakes. Best of luck!

(Side Note:If you replace { and } with “<” and “/>”, and you replace “:” with “/”… you’d have something very similar to gaXml. Funny old world.

(Other side note: Jason and Ajax were both mythical greek heroes. Prediction: other forthcoming technology jargon will include: Heracles, Perseus, Deucalion, Theseus and Bellerophon.)

(To generate JSON, use a data manipulation tool like NimbleText)