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
alert(myObjectUsingJSON.aPublicMethod()); 

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
alert(myObjectUsingJSON.anArray[2]);

// Access the inner object
alert(myObjectUsingJSON.anotherArray[4].X);

// Get a value from a name
alert(myObjectUsingJSON.anObject.key3.key31);

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

// Call the deepest function
alert(myObjectUsingJSON.anObject.key3.key33.key331());

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
alert(myEvaledJSONObject.anotherArray[4].X);

For more information about JSON see here.