Skip to content
Home » Company » White Papers » JSON – JavaScript Object Notation

JSON – JavaScript Object Notation

  • by
json - JavaScript Object Notation
Train-Track diagram representation of the JSON string-type

Mike Peat – May 2011

JSONJavaScript Object Notation – is a lightweight data-transfer protocol comparable to XML.  Its widely recognised originator – Douglas Crockford – sees himself, alongside others working independently, as its “discoverer”, rather than its inventor, because in his view it was always implicit in JavaScript’s “object literal” syntax.

JSON Syntax

In JavaScript there are two – entirely equivalent – ways to create objects and assign properties to them:

Traditional (C++ style) syntax:

   var myObj = new Object();   myObj.prop1 = val1;   myObj.prop2 = val2;

Object literal syntax:

   var myObj = {      prop1: val1,      prop2: val2   };

It is this latter “literal” syntax that forms the basis of JSON.

There are only six types of data in JSON:

  • String: “Hello World” (note: only double-quotes, not single)
  • Number: 6, 3.1415, 1.9176e12
  • Boolean: true / false
  • Object: { … }
  • Array: [ … ]
  • Null: null

Within objects, members (properties) are defined as a comma-separated list of name/value pairs in the format “name”: value. Note that, unlike in JavaScript, the property name is enclosed in double quotes.

Within arrays the elements are a comma-separated list of values.

The “values” in objects and arrays can be any of the six data types, including objects and arrays.

This scheme (plus some simple rules for encoding special characters in strings) allows data of arbitrary complexity to be represented. It would be hard to think of a much simpler format.

Advantages

Because JSON is based on the data structures of a programming language (JavaScript in this case, but almost all programming languages use the same kind of mechanisms) it is a very simple exercise to translate between JSON and a language’s native data formats, either exporting that data as JSON or importing JSON into native data structures. This is in dramatic contrast to XML, which, being based on a document-markup structure, is – as anybody who has attempted it can testify – a major chore to serialise from, or deserialise into, native data structures.

Within JavaScript, although it is possible to import JSON using the JavaScript “eval” function, it is strongly recommended that this be avoided for security reasons. Instead a small JavaScript module – json2.js – is available from Douglas Crockford which provides a pair of functions – JSON.parse() and JSON.stringify() – which manage serialisation of JSON into and out of JavaScript data structures. In modern browsers (those which implement the new ECMAScript 5 standard) this script does nothing, because such browsers have their own built-in (hence very fast) versions with the same names which it does not overwrite.

For this reason Ajax-style applications, which are increasingly coming to dominate the software landscape and whose user-interface front-ends are almost exclusively written in JavaScript delivered into the web browser, are now generally using JSON as their data-transfer format, nearly to the exclusion of all else.

While XML/SOAP, with its infrastructure of WSDL service definitions and other “WS-*” protocols, remains a sound choice for inter-organisational web services, for those situations – such as Ajax applications – where both the client-side and the server-side aspects of the software are being developed by the same team, JSON has become the standard form for their interaction.

What it looks like

So what does complex data look like in JSON?

{ “order”: { “orderNum”: 47511, “custNum”: 211, “orderDate”: “21/05/2011”, “terms”: “30 days”, “shipping”: “FEDEX”, “shipNow”: true, “orderedBy”: “Tony Burroughs”, “salesRep”: “Alice Wright”, “nett”: 3119.59, “tax”: 467.94, “orderTotal”: 3587.53, “orderLines”: [ { “productCode”: “BXT1170”, “description”: “Big expensive thing”, “taxable”: true, “quantity”: 2, “price”: 1400, “discountPct”: 0, “subTotal”: 2800, “tax”: 420, “total”: 3220 }, { “productCode”: “SCT234”, “description”: “Small cheap thing”, “taxable”: true, “quantity”: 300, “price”: 0.49, “discountPct”: 5, “subTotal”: 139.65, “tax”: 20.95, “total”: 160.6 }, { “productCode”: “MPT4104”, “description”: “Medium priced thing”, “taxable”: true, “quantity”: 6, “price”: 29.99, “discountPct”: 0, “subTotal”: 179.94, “tax”: 26.99, “total”: 206.93 } ] }}

This demonstrates another significant advantage of JSON: it is nearly as easy (at least when it is nicely formatted like this) for humans to read as it is for machines. If it isn’t already nicely formatted, you can use the services of a very useful web site, JSONLint, which will not only “prettify” your JSON, but will also validate its correctness and flag up any errors – dashed handy at times, we can tell you!

See also JSONP