• Choose a category
• All
• Classic-Fiction

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 (as described earlier in this chapter).

3. Designate a key.

For the critter, I want the properties to be named “name” and “age” rather than numeric indices. For each property, I begin with the property name. 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. In this case, I associate the value George with the key name.

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. However, if you want to think of it as one of these things, I won’t tell anybody.

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 (oddly familiar) 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 another two-dimension array, but it is a little different than the one previously described.

♦ 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: It’s much easier to understand distance[“Indianapolis”][“London”] than distance[0][3].

♦ JSON data can be stored and transported as text: This turns out to have profound implications for Web programming, especially in AJAX (the techniques described in minibook 7).

♦ JSON can describe complex relationships: The example shown here is a simple two-dimension array, but