How to Use JavaScript Object Notation (JSON) for HTML5 and CSS3 Programming

JavaScript objects and arrays are incredibly flexible for HTM5 and CSS3 programming. In fact, they are so well known for their power and ease of use that a special data format called JavaScript Object Notation (JSON) has been adopted by many other languages.

JSON is mainly used as a way to store complex data (especially multidimensional arrays) and pass the data from program to program. JSON is essentially another way of describing complex data in a JavaScript object format. When you describe data in JSON, you generally do not need a constructor because the data is used to determine the structure of the class.

JSON data is becoming a very important part of web programming because it allows an easy mechanism for transporting data between programs and programming languages.

Storing data in JSON format

To see how JSON works, look at this simple code fragment:

 var critter = {
 "name": "George",
 "age": 10
 };

This code describes a critter. The critter has two properties, a name and an age. The critter looks much like an array, but rather than using a numeric index like most arrays, the critter has string values to serve as indices. It is in fact an object.

You can refer to the individual elements with a variation of array syntax, like this:

alert(critter["name"]);

You can also use what's called dot notation (as used in objects) like this:

alert(critter.age);

Both notations work the same way. Most of the built-in JavaScript objects use dot notation, but either is acceptable.

The reason JavaScript arrays are so useful is that they are in fact objects. When you create an array in JavaScript, you are building an object with numeric property names. This is why you can use either array or object syntax for managing JSON object properties.

To store data in JSON notation:

1. Create the variable.

   You can use the var statement like you do any variable.

2. Contain the content within braces ({}).

   This is the same mechanism you use to create a preloaded array.

3. Designate a key.

   The key can be a string or an integer.

4. Follow the key with a colon (:).

5. Create the value associated with that key.

   You can then associate any type of value you want with the key.

6. Separate each name/value pair with a comma.

   You can add as many name/value pairs as you wish.

If you're familiar with other languages, you might think a JSON structure similar to a hash table or associative array. JavaScript does use JSON structures the way these other structures are used, but it isn't quite accurate to say JSON is either a hash or an associative array. It's simply an object.

Building a more complex JSON structure

JSON is convenient because it can be used to handle quite complex data structures. For example, look at the following data structure written in JSON format:

 var distance = {
 "Indianapolis" :
 { "Indianapolis": 0,
  "New York": 648,
  "Tokyo": 6476,
  "London": 4000 },
 "New York" :
 { "Indianapolis": 648,
  "New York": 0,
  "Tokyo": 6760,
  "London": 3470 },
 "Tokyo" :
 { "Indianapolis": 6476,
  "New York": 6760,
  "Tokyo": 0,
  "London": 5956 },
 "London" :
 { "Indianapolis": 4000,
  "New York": 3470,
  "Tokyo": 5956,
  "London": 0 },
 };

This data structure is another way of representing the distance data used to describe two-dimension arrays. This is a two-dimension array.

• distance is a JSON object: The entire data structure is stored in a single variable. This variable is a JSON object with name/value pairs.

• The distance object has four keys: These correspond to the four rows of the original chart.

• The keys are city names: The original 2D array used numeric indices, which are convenient but a bit artificial. In the JSON structure, the indices are actual city names.

• The value of each entry is another JSON object: The value of a JSON element can be anything, including another JSON object. Very complex relationships can be summarized in a single variable.

• Each row is summarized as a JSON object: For example, the value associated with “Indianapolis” is a list of distances from Indianapolis to the various cities.

• The entire declaration is one “line” of code: Although it is placed on several lines in the editor (for clarity) the entire definition is really just one line of code.

Setting up the data in this way seems a bit tedious, but it's very easy to work with. The city names are used directly to extract data, so you can find the distance between two cities with array-like syntax:

 alert(distance["Indianapolis"]["London"]);

If you prefer, you can use the dot syntax:

 alert(distance.Indianapolis.Tokyo);

You can even go with some kind of hybrid:

 alert(distance["London"].Tokyo);

JSON has a number of important advantages as a data format:

• Self-documenting: Even if you see the data structure on its own without any code around it, you can tell what it means.

• The use of strings as indices makes the code more readable.

• JSON data can be stored and transported as text: This turns out to have profound implications for web programming, especially in AJAX.

• JSON can describe complex relationships: The JSON format can be used to describe more complex relationships including complete databases.

• Many languages support JSON format: Many web languages now offer direct support for JSON. The most important of these is PHP, which is frequently used with JavaScript in AJAX applications.

• JSON is more compact than XML: Another data format called XML is frequently used to transmit complex data. However, JSON is more compact and less “wordy” than XML.

• JavaScript can read JSON natively: Some kinds of data need to be translated before they can be used. As soon as your JavaScript program has access to JSON data, it can be used directly.