Understanding JSON: the 3 minute lesson
secretGeek .:dot Nuts about dot Net:.
home .: about .: sign up .: sitemap .: secretGeek RSS

Understanding JSON: the 3 minute lesson

JSON and the GLDN FLECE

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

  1. Two months ago you'd never heard of JSON
  2. One month ago you'd heard the term but paid no attention
  3. One week ago you'd heard it mentioned a few times and started to think, right... some more crap to learn
  4. 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 it 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

  1. Squiggly brackets act as 'containers'
  2. Square brackets holds arrays
  3. Names and values are separated by a colon.
  4. 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:

  1. They are both 'self-describing' meaning that values are named, and thus 'human readable'
  2. Both are hierarchical. (i.e. You can have values within values.)
  3. Both can be parsed and used by lots of programming languages
  4. Both can be passed around using AJAX (i.e. httpWebRequest)

JSON is UNlike XML because:

  1. 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.
  2. JSON is less verbose so it's definitely quicker for humans to write, and probably quicker for us to read.
  3. JSON can be parsed trivially using the eval() procedure in JavaScript
  4. JSON includes arrays {where each element doesn't have a name of its own}
  5. 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:

  1. bring back an XML document
  2. loop through it, extracting values from it
  3. do something with those values, etc,

versus

The JSON approach:

  1. bring back a JSON string.
  2. '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.)





'Simon' on Sun, 23 Jul 2006 18:22:02 GMT, sez:

Brilliant. I had (sub-consiously) followed steps 1 to 4 exactly as you describe, except the alarm bells were 3 days ago. Thankyou for saving me the agro of looking it up for myself.



'John' on Sun, 23 Jul 2006 19:35:19 GMT, sez:

INI files Rule! I still think they are great for a lot of things. Easy to edit w/ notepad. Easy to see what is going in. Nesting is the only downside.

Anyway, nice post on LEON er, JSON. How many reader know what Ecmascript is anyway?



'Rumen Stankov' on Mon, 24 Jul 2006 06:29:04 GMT, sez:

Ah! At last. Someone to second my JSON vs Jason Donovan celebrity deathmatch. And a guy from Australia!

http://blogs.telerik.com/blogs/rumen_stankov/archive/2006/02/22/129.aspx



'Wesley Shephard' on Mon, 24 Jul 2006 22:20:38 GMT, sez:

Interesting. Wouldn't that run the risk of injection type attacks if the communication channel wasn't heavily guarded. The rule of thumb I recall was never EVAL user supplied data, yet it would seem as easy to get evaluable code into your JSON data stream.

SQL injection, take two?



'lb' on Tue, 25 Jul 2006 00:04:01 GMT, sez:

yeh it looks very 'injectable' -- maybe more prone to XSS (cross site scripting) than sql injection...

i guess the main trick is html encoding all user input, so it can't be interpreted as html (or javascript).



'Dustin Diaz' on Tue, 25 Jul 2006 13:49:44 GMT, sez:

JSON in and of itself is not what's OO. They are mere objects - and that's it. It's the context that they could be used in, eg. returning an object of public members.

var Class = function() {
var private_var;
var pivate_method = function() {};
this.instaceProperty = 'foo';
return {
public_foo : function() { },
public_bar : function() { }
};
}();



'Aaron Bassett' on Tue, 25 Jul 2006 14:30:35 GMT, sez:

I get what people are saying about using eval and caution but if running Javascript in a webbrowser and doing the eval() there, then this is clientside. And injection should be taken as a given anyways.
I dont need to inject anything into the JSON before JS does its eval - I just load up the page with firefox and greasemonkey. Now I can add whatever javascript I want to the page anyways.
Its when your dealing with server side processes you need to be very carefull with user submitted data.



'lb' on Wed, 26 Jul 2006 05:07:27 GMT, sez:

@Aaron
>Its when your dealing with server side
>processes you need to be very carefull
>with user submitted data

true -- but client side you have to be careful as well.

look into the concept of XSS (cross site scripting) and you'll learn some devious capabilities, entirely client side that can be used by one client to steal from another.

without any data being sent to the server, user information could be lifted from cookies and sent to a third machine, for example. This stuff is a different category to SQL Injection -- though it has some stuff in common, though javascript is injected rather than sql.

@Dustin
Cheers Dustin -- you're a legend. I like your 'JSON for the masses' article. In the text above where I say "i took a pile of 'JSON' tutorials on the bus with me" -- one of them was yours of course.

cheers
lb



'Aaron Bassett' on Thu, 27 Jul 2006 12:55:59 GMT, sez:

@lb agreed but if you are receiving the JSON from a trusted source (ie your own server side script) where there is no possibility of a 3rd party injecting their own code then the use of eval is fine.

If a user injects javascript into your page through their client the only information they can steal is their own.



'Brad In Illinois, USA' on Fri, 28 Jul 2006 15:59:16 GMT, sez:

Vacation?



'Doekman' on Mon, 31 Jul 2006 20:40:02 GMT, sez:

In comparisation with XML you say:

"In XML you can use any name you want for an element, in JSON you can't use reserved words from javascript"

This is not true. In Json you need to quote property names, and it's legal to use for example: var o={"true":false, "null": 123, "while": "waiting"}; In javascript you can than access the properties by o["true"] etc.

However: never thought I could have this much fun with Json. Thanks for the fun.



'Andy Williams' on Mon, 07 Aug 2006 13:30:11 GMT, sez:

Hello,

I think you're example is missing a comma, I think it should be this:

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

}}


Comments disabled thanks to evil spamming people -- sorry!


Articles

The Canine Pyramid The Canine Pyramid
Humans: A Tragedy. Humans: A Tragedy.
ACK! ACK!
OfficeQuest... Gamification for the Office Suite OfficeQuest... Gamification for the Office Suite
New product launch: NimbleSET New product launch: NimbleSET
Programming The Robot from Diary of a Wimpy Kid Programming The Robot from Diary of a Wimpy Kid
Happy new year 2014 Happy new year 2014
Downtime as a service Downtime as a service
The Shape of Your Irrationality The Shape of Your Irrationality
This is why I don't go to nice restaurants any more. This is why I don't go to nice restaurants any more.
A flowchart of what programmers do at work all day A flowchart of what programmers do at work all day
The Telepresent Man. The Telepresent Man.
Interview with an Ex-Microsoftie. Interview with an Ex-Microsoftie.
CRUMBS! Commandline navigation tool for Powershell CRUMBS! Commandline navigation tool for Powershell
Little tool for making Amazon affiliate links Little tool for making Amazon affiliate links
Extracting a Trello board as markdown Extracting a Trello board as markdown
hgs: Manage Lots of Mercurial Projects Simultaneously hgs: Manage Lots of Mercurial Projects Simultaneously
You Must Get It! You Must Get It!
AddDays: A Very Simple Date Calculator AddDays: A Very Simple Date Calculator
Google caught in a lie. Google caught in a lie.
NimbleText 2.0: More Than Twice The Price! NimbleText 2.0: More Than Twice The Price!
A Computer Simulation of Creative Work, or 'How To Get Nothing Done' A Computer Simulation of Creative Work, or 'How To Get Nothing Done'
NimbleText 1.9 -- BoomTown! NimbleText 1.9 -- BoomTown!
Line Endings. Line Endings.
**This** is how you pivot **This** is how you pivot
Art of the command-line helper Art of the command-line helper
Go and read a book. Go and read a book.
Slurp up mega-traffic by writing scalable, timeless search-bait Slurp up mega-traffic by writing scalable, timeless search-bait
Do *NOT* try this Hacking Script at home Do *NOT* try this Hacking Script at home
The 'Should I automate it?' Calculator The 'Should I automate it?' Calculator

Archives Complete secretGeek Archives

TimeSnapper -- Automated Screenshot Journal TimeSnapper: automatic screenshot journal

25 steps for building a Micro-ISV 25 steps for building a Micro-ISV
3 minute guides -- babysteps in new technologies: powershell, JSON, watir, F# 3 Minute Guide Series
Universal Troubleshooting checklist Universal Troubleshooting Checklist
Top 10 SecretGeek articles Top 10 SecretGeek articles
ShinyPower (help with Powershell) ShinyPower
Now at CodePlex

Realtime CSS Editor, in a browser RealTime Online CSS Editor
Gradient Maker -- a tool for making background images that blend from one colour to another. Forget photoshop, this is the bomb. Gradient Maker



[powered by Google] 

How to be depressed How to be depressed
You are not inadequate.



Recommended Reading


the little schemer


The Best Software Writing I
The Business Of Software (Eric Sink)

Recommended blogs

Jeff Atwood
Joseph Cooney
Phil Haack
Scott Hanselman
Julia Lerman
Rhys Parry
Joel Pobar
OJ Reeves
Eric Sink

InfoText - amazing search for SharePoint
LogEnvy - event logs made sexy
Computer, Unlocked. A rapid computer customization resource
Aussie Bushwalking
BrisParks :: best parks for kids in brisbane
PhysioTec, Brisbane Specialist Physiotherapy & Pilates
 
home .: about .: sign up .: sitemap .: secretGeek RSS .: © Leon Bambrick 2006 .: privacy

home .: about .: sign up .: sitemap .: RSS .: © Leon Bambrick 2006 .: privacy