Javascript Concepts Simplified Part 3: Javascript and JSON

JSON stands for Javascript Object Notation. In the first post we saw how to define a class in Javascript so that an object instance can be created. Now let’s create an object using the object literal notation. In Javascript, there is the concept of a literal notation to define an object,

// A string literal
var stringLiteral = "A string literal";

// An array literal
var arrayLiteral = [1,2,3];

Extending this concept to objects, we create an anonymous type in Javascript using an object literal,

// Create an anonymous type by using the object literal notation,
var myObjectUsingJSON = {

    // Public field – a name/value pair
    aPublicField : "This is a public field of an anonymous type",

    // Public method – another name/value pair
    aPublicMethod : function() { return this.aPublicField; } 

// Call the anonymous type’s public field or method

We created an instance (myObjectUsingJSON) of the the anonymous type using the object literal notation and the anonymous object has two members which are name-value pairs. This way of representing (and creating) an object is called the Javascript Object Notation or JSON. It’s just a way of creating an anonymous type using name-value pairs. For comparison, recall how we similarly create anonymous types in C#,

// Anonymous type in C#
var anonType = new { Name = "John", Age = 50 };

Now let’s create a more complicated class using this object notation,

// Create an anonymous type...
var myObjectUsingJSON = {

    // ...with a key whose value is a simple array...
    anArray : ["This", "array", "has", 5, "items"],

    // ...and another key whose value is an array with a nested object...
    anotherArray : ["This", "array", "has", 6, { X: 1 }, "items"],

    // ...and another key whose value happens to be another anonymous object...
    anObject : {
        key1 : "A string",                           /* ...with one key whose value is a string... */
        key2 : function() { return "Hello"; },       /* ...and another key whose value is a function... */
        key3 : {                                     /* ...and another key whose value happens to be another anonymous object */
            key31 : true,                            /* ...with a key whose value is a boolean... */
            key32 : function() { return { Name: "World!" }; }, /* ...and a key whose value is a function that returns an object */
            key33 : {                                          /* This key's value happens to get yet another anonymous object */
                key331 : function() { return "That’s deep!"; }

// Access an array element

// Access the inner object

// Get a value from a name

// Access the object returned by the function
var funcReturn = myObjectUsingJSON.anObject.key3.key32();

// Call the deepest function

As you can see it’s pretty easy to nest anonymous objects to create a class structure. This representation of a class is more compact than XML, in terms of raw serialized bytes sent over the wire. So, Javascript prefers using this object notation when sending/receiving data. A string can easily be eval-ed into an object,

// The JSON string
var jsonString = "{ anotherArray: ['This', 'array', 'has', 6, { X: 1 }, 'items'] }";

// Eval the JSON string into an object
var myEvaledJSONObject = eval('(' + jsonString + ')');

// Access the object

For more information about JSON see here.


About soumya chattopadhyay
I live and work in Seattle, WA. I work with Microsoft technologies, and I'm especially interested in C#.

One Response to Javascript Concepts Simplified Part 3: Javascript and JSON

  1. Pingback: Javascript Concepts Simplified « I.Net

Leave a Reply

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

You are commenting using your 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: