What is JSON?

Introducing JSON

JSON has simple types and two structures which are very similar to the universally used data structures such as dictionary objects, hash values, key/value pairs, lists, sequences, record sets, arrays and so on. The basic data types supported by JSON are as follows:

• Number - Includes integer, real, and floating point
• String – Supports Unicode
• Boolean - true and false
• Array – It is represented as an ordered sequence of values, with each value being comma-separated and enclosed in square brackets.
• Object – Represents a collection of key/value pairs that are comma-separated and enclosed in curly brackets
• null

Let us consider the key characteristics of JSON in the next few sections.

JSON Object

A JSON object is an unordered set of key/value pairs, with keys separated by values using a colon (:). The members inside the object are separated by a comma (,).

var prod = {"ProductID":1, "Name":"Adjustable Race", "ProductNumber":"AR-5381"};

Here is a variable that represents a JSON object with three members. A JSON object is always enclosed between curly brackets and the members inside the object are separated by a comma.

var prod = {"ProductID":1, "Name":"Adjustable Race", "ProductNumber":"AR-5381"};

As you can see, the first member has the name ProductID with the value of 1.
Once you convert the string into a JSON representation, you can access any member value using the dot notation as shown below:

alert(prod.ProductID);

JSON Array

Unlike JSON objects, JSON arrays are enclosed between square braces [ ]. The JSON array is an ordered sequence of values separated by a comma (,). The values can be any of the primitive types as well as the JSON objects. In addition, you can also embed a JSON array inside another JSON array. Consider the following JSON array that has four string variables:

var colorArray =["Red", "Blue", "Yellow", "Magenta"];

You will be able to access the above zero based array item through the array index.

<Script Language="JavaScript">
  var colorArray =["Red", "Blue", "Yellow", "Magenta"];
  for (i=0; i<4; i++){
    document.write( myJsonArray[i]+ "<br>" );
  }
</Script>

Advantage of JSON

Syntax: JSON syntax is quite light and definitely less verbose than XML, with all of its start and end tags. When it comes down to pure byte-size, JSON can represent the same data as XML using fewer characters.

Weight: Since JSON syntax requires fewer characters, it is lighter on the wire than XML. The question is if this really matters. Any large data set is going to be large regardless of the data format you use. Add to that the fact that most servers gzip or otherwise compress content before sending it out, the difference between gzipped JSON and gzipped XML isn’t nearly as drastic as the difference between standard JSON and XML.

Browser Parsing: On the browser, there’s no such thing as a JSON parser. However, there is eval(), which interprets JavaScript code and returns the result. Since JSON syntax is a subset of JavaScript syntax, a JSON string can be evaluated using eval() and quickly turned into an object that is easy to work with and manipulate. XML parsing on the browser is spotty at best. Each browser implements some different way of dealing with XML and none of them are terribly efficient. In the end, the XML ends up as a DOM document that must be navigated to retrieve data. Native JavaScript objects are much easier to work with in JavaScript than DOM documents, although the playing field would level out considerably if every browser supported ECMAScript for XML (E4X), which makes working with XML data as easy as working with JavaScript objects.

Server Parsing: On the server, parsing is just about equal between JSON and XML. Most server-side frameworks have XML parsing capabilities and many now are starting to add JSON parsing capabilities as well. On the server, these parsers are essentially equal, parsing a text format into an object model. JSON holds no advantage over XML in this realm.

Querying: This is where XML really shines. Using XPath, it’s possible to get direct access to a part of multiple parts of an XML data structure; no such interface exists for JSON. To get data from a JSON structure, you must know exactly where it is or else iterate over everything until you find it.
Format Changes: So you have your data in one format but you want it in another. If the data is in XML, you can write an XSLT template and run it over the XML to output the data into another format: HTML, SVG, plain text, comma-delimited, even JSON. XSLT support in browsers is pretty good, even offering JavaScript-level access to it. XSLT support on the server is excellent. When you have data in JSON, it’s pretty much stuck there. There’s no easy way to change it into another data format. Of course it’s possible to walk the structure and do with it as you please, but the built-in support isn’t there as it is with XSLT for XML.

Security: Since the only way to parse JSON into JavaScript objects is to use eval(), it opens up a huge security hole. The eval() function will execute any arbitrary JavaScript code and so is dangerous to use in production systems. Invalid JSON that contains valid JavaScript code could execute and wreak havoc on an application. The solution, of course, is to build a true JSON parser for browsers, but we’re not there yet. On the other hand, XML data is completely safe. There is never a possibility that parsing XML data will result in code being executed.

With all of this considered, the two main advantages that JSON has over XML are 1) the speed and ease with which it’s parsed and 2) the ease of simple data retrieval from JavaScript object. Note that both of these advantages exist on the browser side of things; on the server-side they are essentially equal, unless you take querying and format changes into account, in which case XML is the clear winner. I don’t think that code size really is an advantage when you’re talking about gzipped data. I also believe that if ECMAScript for XML is implemented in all browsers, that JSON’s advantages go away.