Scott Klarr Jr

Javascript: What is JSON?

What is JSON?

JSON stands for Javascript Object Notation which is a data structuring format that is extremely clean and lightweight. Even though JSON is native to javascript (as in, it can be turned into an object directly by javascript), it is quite easy to handle with other languages, making it an ideal replacement of XML when javascript is involved with the exchange of data (i.e. ajax).

XML vs JSON

JSON should be used instead of XML whenever you are transferring data to or from Javascript. The reason for this is that when you use XML in javascript, you must write script or use libraries to handle the DOM objects to extract the data you need, whereas with JSON, the data format creates a Javascript object directly. This keeps overhead down and requires less cpu usage when preparing the data, not to mention it also decreases the amount of code you must write. There are many libraries out there for all the widely used languages for handling JSON with ease. This is debatable, but I also believe that even in a non-native language, parsing JSON will be faster due simply to a more lightweight data structure. In XML there is a lot of bytes wasted and more memory required by the parser to keep track of tag names of varying sizes. Also, some languages such as PHP 5, actually have built-in libraries for handling JSON! Very cool!

Object Notation

Before you can use JSON, you must understand the shorthand construction of arrays in javascript (similar to other languages as well.) This is of course assuming you have an understanding of what an array is and how it works. I will briefly go over the shorthand object creation.

var myFruits = ["apple","orange","banana"];

Take a look at the code above. We have constructed the object myFruits (synonymously a variable in javascript) that is an array of fruits. Because we used the [ ] brackets, these array items will be automatically assigned a key based on an incrementing number, starting with 0.

alert(myFruits[0]); // Alerts "apple" alert(myFruits[1]); // Alerts "orange" alert(myFruits[2]); // Alerts "banana"

The array items are now accessible through objectName[key], or in the first example: myFruits[0] which returns "apple", as apple was the first item of the array list.

var fruitColors = { "apple":"green", "banana":"yellow", "orange":"orange" }; var students = { 273:"Scott", 278:"John", 293:"Mary" };

In this code, we look at the slightly more complex construction that allows you to specify both keys and values for the array. By using the { } brackets, you are able to do this (make sure you notice the difference from the last example.) There are two variants displayed here that shows how you can use keys that are either numeric, or alphanumeric. Take note of the use of quotations for alphanumerics keys (you can optionally use quotes for numeric keys)

alert(fruitColors['apple']); // Alerts "green" alert(fruitColors['banana']); // Alerts "yellow" alert(fruitColors['orange']); // Alerts "orange" alert(students[273]); // Alerts "Scott" alert(students[278]); // Alerts "John" alert(students[293]); // Alerts "Mary"

Just as in the first example, the object items are accessed through the format of objectName[key]

JSON Examples

Here is a very simple single-dimension object:

{ "title": "Pro JavaScript Techniques", "pages": 384, "isbn": "978-1590597279", "id": 2937 }

Another simple sing-dimension example (note the use of [ ] brackets to signify auto-generated keys):

[ "banana", "apple", "orange" ]

Now an example of the good stuff :). Heres is a relatively simple multi-dimensional object using both [] and {} brackets:

[ { "title": "Pro JavaScript Techniques", "pages": 384, "isbn": "978-1590597279" }, { "title": "Professional Ajax", "pages": 624, "isbn": "978-0470109496" } ]

How to access the above object (assuming it has been already assigned to the object objectName):

alert(objectName[0]['title']); // Alerts "Pro Javascript Techniques" alert(objectName[1]['title']); // Alerts "Professional Ajax" alert(objectName[1]['isbn']); // Alerts "978-0470109496"