5 Minutes To Master JSON (JavaScript Object Notation)

To follow this tutorial, you don’t have to be experienced with Javascript. But it’ll be preferred if you have at least a little bit knowledge about Object Oriented Programming. Put all the scripts below inside the body element enclosed by script tag.

Minute 1 - Intro to Object

var myFirstObject = {};

It may not look like much, but those squiggly braces have the potential to record every bit of information humanity has ever gathered, and express the most complex programs computer scientists can dream up. In fact, Javascript itself is stored inside a set of squiggly braces just like that, as are all of its primitive data types -- strings, numbers, arrays, dates, regular expressions, they're all objects and they all started out just like myFirstObject.

Minute 2 - Creating A New Object

The old way to create a new object was to use the new keyword.
var myJSON = new Object();
The above method has been deprecated now in favor of simply defining an empty object with squiggly braces.
var myJSON = {};

Objects as Data
var myJSON = { "firstName": "Barrack", "lastName": "Obama", "age": 44 };

This myJSON object has 3 properties or name/value pairs. The name is a string -- in our example, firstName, lastName, and age. The value can be any Javascript object (and remember everything in Javascript is an object so the value can be a string, number, array, function, even other Objects) -- In this example our values are “Barrack”, “Obama”, and 44. “Barrack” and “Obama” are strings but age is a number and as you can see this is not a problem.

This data format is called JSON for JavaScript Object Notation. What makes it particularly powerful is that since the value can be any data type, you can store other arrays and other objects, nesting them as deeply as you need.

Minute 3 - Accessing Data In JSON

The most common way to access JSON data is through dot notation. This is simply the object name followed by a period and then followed by the name/property you would like to access.

document.writeln(myJSON.firstName); // Outputs Barrack
document.writeln(myJSON.lastName); // Outputs Obama
document.writeln(myJSON.age); // Outputs 44

If your object contains an object then just add another period and name
var myAnimals = { “cat”: { “name”: “mojo”, “color”: “white” }, “dog”: { “name”: “twister”, “color”: “gray” } };

document.writeln(myAnimals.cat.name); // outputs mojo
document.writeln(myAnimals.dog.name); // outputs twister

Minute 4

Array as A Value

If your object contains an object with a type of Array, just specify the index of data after object name. This example will show you how to use a value with type of array
var myAnimals = { “cat”: { “name”: “mojo”, “color”: “white” }, “dogs”: [{ “name”: “twister”, “color”: “gray” }, { “name”: “sweety”, “color”: “brown” }] };

document.writeln(myAnimals.cat.name); // outputs mojo
document.writeln(myAnimals.dogs[0].name); // outputs twister
document.writeln(myAnimals.dogs[1].name); // outputs sweety


Function as A Value

The other power of Javascript is that you can assign a function to a variable directly. This example will create a message box that is called by show function
var myIdentity = { “name”: “joe”, “age”: 23, show: function(){alert(this.name + ‘ ’ + this.age)} };
myIdentity.show();

Minute 5 - Receiving JSON via AJAX

In this minute, if you’ve known a little about AJAX, you’ll figure out that using JSON as data format is much easier than XML.

Remember that JSON data is simply string received from the server. Suppose that responseText contains string from server that is called by XMLHttpRequest.
var responseText = "fruits = { ‘name’: ‘apple’, 'color' : 'red' }"; // example of what is received from the server.
eval(responseText); // Execute the javascript code contained in responseText.

document.writeln(apple.color); // Outputs ‘green’

eval() function is just a built-in Javascript string compiler which can run very fast.

I think that’s all the essence of JSON. I suggest you to go to json.org to learn some more advance concept.

Don’t forget to leave a comment so I know that this post is useful to you.