Understanding JSON

What Is JSON?

JSON is short for JavaScript Object Notation, and is a way to store information in an organized, easy-to-access manner. In a nutshell, it gives us a human-readable collection of data that we can access in a really logical manner.

Storing JSON Data

As a simple example, information about me might be written in JSON as follows:

  var jason = { 
      "age" : "24", 
    "hometown" : "Missoula, MT", 
      "gender" : "male" 
};

This creates an object that we access using the variable jason. By enclosing the variable's value in curly braces, we're indicating that the value is an object. Inside the object, we can declare any number of properties using a"property-name" : "property-value" pairing, separated by commas.

To access the information stored in jason, we can simply refer to the name of the property we need. For instance, to access information about me, we could use the following snippets:

  document.write('Jason is '+jason.age); // Output: 
  Jason is 24 
document.write('Jason is a '+jason.gender); // Output: Jason is a 
  male

Storing JSON Data in Arrays

A slightly more complicated example involves storing two people in one variable. To do this, we enclose multiple objects in square brackets, which signifies an array.

For instance, if I needed to include information about myself and my brother in one variable, I might use the following:

  var family = [{ 
      "name" : "Jason", 
    "age" : "24", 
      "gender" : "male" 
}, 
  { 
    "name" : "Kyle", 
      "age" : "21", 
    "gender" : "male" 
  }];

To access this information, we need to access the array index of the person we wish to access. For example, we would use the following snippet to access info stored in family:

  document.write(family[1].name); // Output: Kyle 
  document.write(family[0].age); // Output: 24

NOTE: This is beneficial if it will be necessary to loop through stored information, as it lends itself to a for loop with an automatically incrementing value.

Nesting JSON Data

Another way to store multiple people in our variable would be to nest objects. To do this, we would create something similar to the following:

  var family = { 
      "jason" : { 
        "name" : "Jason Lengstorf", 
          "age" : "24", 
        "gender" : "male" 
      }, 
    "kyle" : { 
          "name" : "Kyle Lengstorf", 
        "age" : "21", 
          "gender" : "male" 
    } 
  }

Accessing information in nested objects is a little easier to understand; to access information in the object, we would use the following snippet:

  document.write(family.jason.name); // Output: Jason 
  Lengstorf 
document.write(family.kyle.age); // Output: 21 
document.write(family.jason.gender); // Output: male

Nested JSON and arrays can be combined as needed to store as much data as necessary.

Why Does JSON Matter?

With the rise of AJAX-powered sites, it's becoming more and more important for sites to be able to load dataquickly and asynchronously, or in the background without delaying page rendering.

Switching up the contents of a certain element within our layouts without requiring a page refresh adds a "wow" factor to our applications, not to mention the added convenience for our users.

Because of the popularity and ease of social media, many sites rely on the content provided by sites such as Twitter, Flickr, and others. These sites provide RSS feeds, which are easy to import and use on the server-side, but if we try to load them with AJAX, we run into a wall: we can only load an RSS feed if we're requesting it from the same domain it's hosted on.

An attempt to load my Flickr account's RSS feed via jQuery's $.ajax() method results in the following JavaScript error:

  [Exception... "Access to restricted URI denied" 
  code: "1012"  
nsresult: "0x805303f4 (NS_ERROR_DOM_BAD_URI)"  
location: "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js 
  Line: 19"]

JSON allows us to overcome the cross-domain issue because we can use a method called JSONP that uses a callback function to send the JSON data back to our domain. It's this capability that makes JSON so incredibly useful, as it opens up a lot of doors that were previously difficult to work around.

How Do We Load JSON into a Project?

One of the easiest ways to load JSON data into our web applications is to use the $.ajax() method available in the jQuery library. The ease of retrieving data will vary based on the site providing the data, but a simple example might look like this:

  $.ajax( 
      type:'GET', 
    url:"http://example.com/users/feeds/", 
      data:"format=json&id=123", 
    success:function(feed) { 
          document.write(feed); 
    }, 
    dataType:'jsonp' 
);

This example would request the latest feed items in JSON format and output them to the browser. Obviously, we wouldn't want to output raw JSON data to the browser, but this example shows the basics of loading JSON from an external source.



More info http://ennuidesign.com/blog/JSON:+What+It+Is,+How+It+Works,+and+How+to+Use+It/