Technology, Tips & Tricks

Understanding JSON (JavaScript Object Notation)

JSON or the JavaScript Object Notation, as we know, is one of the highly popular data-interchange format along with XML, YAML, RDF etc. Its popularity is mainly due to its syntactical similarities with the JavaScript and it being human readable. Often, we find it difficult to clearly distinguish between JSON and its JavaScript counterpart – A simple JavaScript Object. In this article, I will try to distinguish the fundamental differences between the two.

Firstly, let me define a simple literal object in JavaScript. It looks like this, in its simplest form:-

var jsObj =

{ "firstName" : "John" , "lastName" : "Michael" };

You can verify if jsObj is an object in your console by checking for its type. typeof(jsObj) should return us object.

This was a fairly simple example of an object in JavaScript. In reality, an object may hold Arrays, Objects, Functions, a String or a value.

For simplicity, lets take a simple object which holds first and last names:-

var jsObj = { "firstName" : "John" , "lastName" : "Michael"};.

JSON is nothing but stringification of this object. i.e;

var jsonStr = '{ "firstName" : "John" , "lastName" : "Michael"
}';

In short, JSON is stringified JavaScript Object. Yes, JSON is a string.

Lets test it out in our browser console using the typeof operator.

typeof(jsonStr) yields string, which is correct.

So far, we have concluded that JSON is nothing but a stringified object. So, are we to understand that all stringified objects are JSON? That’s an easy conclusion, but strangely, the answer is – NO

If not, then what exactly differentiates a JSON as compared to an object? Well, JSON is a stringified object, but with some limitations or rules. Let us figure out what those rules are, below :-

A JSON string must be a series of key : value pairs

The key must be a string

The value must be either an array, object, string or a value. It cannot be a function

Both key and value must be enclosed in none other than double quotes (""), unless the value is a number.

Comments are not allowed.

So, with the above limitations, we could think of JSON as a stringified object.

But then, how do we distinguish any other simple string with JSON, you might ask!.The answer is fairly simple. All modern browsers, supporting JSON have two built-in methods. Lets examine them below:-

JSON.parse(JSON) : Converts a JSON (string) to an object. Takes a JSON as an argument.

JSON.stringify(OBJ) : Stringifies an object. Takes a object as an argument.

Note: JSON.stringify only considers own and enumerable properties of an object. So if the object contains properties, that are either inherited or non-enumerable, then JSON.stringify wouldn’t consider those properties for stringification.

With JSON.parse method, we could easily write a try catch to check for JSON. Any other string will throw an exception when parsed through this method.

Considering our example above:

var jsonStr = '{ "firstName" : "John" , "lastName" : "Michael"
}';

var normalString= 'Hello World'; // Not a JSON but Type = string

Try the following:

JSON.parse (jsonStr) // observe that the output is a object.

JSON.parse(normalString) // observe the exception since we are trying to parse a non-JSON string.