JavaScript – A Different Beast, Part-9: Literals and JSON

JSON

JavaScript Object Notation (JSON) is a data exchange format that was created from a subset of the literal object notation in JavaScript. As we have seen from the previous code sample, the literal notation in JavaScript has a lot of expressive power. JSON utilizes a stricter subset of the literal syntax with two important constraints – (1)property names should be valid JSON strings (i.e. enclosed in quotations), (2) arrays and properties cannot hold functions. Code below shows a JSON message describing the customer info that we saw earlier.

//Sample JSON message
{
     "firstName": "John",
     "lastName": "Smith",
     "age": 25,
     "address":
     {
         "streetAddress": "21 2nd Street",
         "city": "New York",
         "state": "NY",
         "postalCode": "10021"
     },
     "phoneNumber":
     [
         {
           "type": "home",
           "number": "212 555-1234"
         },
         {
           "type": "fax",
           "number": "646 555-4567"
         }
     ]
 }

Please remember that JSON is a data-interchange format, whereas literals are fixed expressions written in the source code. Though JSON has its origin from the JavaScript community, it is a language independent messaging format – just like XML. In fact, JSON is better than XML for browser-based applications in many aspects – native support for parsing in browsers, less verbose (more information in less number of bytes), adoption by all the JavaScript tool-kits etc. A detailed comparison between JSON and XML is available here.

Generation and Parsing

JavaScript provides a JSON object that provides methods to convert an object to JSON and vice versa. Code below shows this in action.

//Code sample for JSON Processing
//Object to JSON
var myJSONText = JSON.stringify(cust1); //cust1 from earlier example
console.log(myJSONText); //this is JSON
console.log(typeof myJSONText); //string

//JSON to Object
var myObject = JSON.parse(myJSONtext);
console.log(myObject); //this is an object
console.log(typeof myObject); //object

To control or format the output for these conversion APIs, a function argument can be passed to the parse and stringify methods. See usage guidelines for more info.

Note: The eval function in JavaScript can also be used for parsing JSON, but has certain security problems since it also executes any code present in the json text. My next post will discuss its details.

JSON as a replacement for XML

JSON is getting more and more popular in the web development scene due to many reasons – it has simple and terse syntax, it works just the way a programmer expects (one doesn’t need to learn ‘xml-ese’ to work with them), easier parsing and generation – no worries about SAX or DOM, serialization/deserialization libraries on all the popular web-server programming environments and most importantly – it was born on the browser, for the browser.

With JSON gradually becoming a preferred alternative to XML (at least in the web-programming) community, all the infrastructure available around XML is as well coming to speed – query languages, transformation languages, schema specifications and automated validators (checks where the message is in accordance with the schema), web-services in the form of JSON-RPC, databases, architectural patterns like JSON-Rest and so on. Visit http://www.json.org to read all about this new world.

Next topic: Meta-programming

Advertisements

About Rahul Mohan

Technical researcher interested in model-driven development of enterprise business applications. Passionate about web technologies and a huge admirer of open-source especially in the Java landscape. When I am not doing any of the above you can find me with my camera (www.flickr.com/photos/rahulmohan/) or listening to music. (In fact, the title of the blog is inspired by Led Zeppelin's Physical Graffiti. )

Posted on June 19, 2011, in JavaScript, Tutorial and tagged , , , . Bookmark the permalink. Leave a comment.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: