zen of shen

JSON is a happy, lightweight data-interchange format similar to XML. It’s often used in AJAX applications and is commonly offered as a response type (e.g. Yahoo, Google, Twitter). JSON is based on a subset of the JavaScript language but its syntax is similar to those of C-based languages, so it’s considered a “language-independent” format although JSON stands for JavaScript Object Notation.

Why use JSON?

In AJAX applications, information is transferred through using the XMLHttpRequest object. Often, this information is structured as XML or just plain text. However, another alternative is to use JSON, which is a pure “data-interchange” syntax, unlike XML, which is a complete markup language. The advantages over XML are that JSON is more lightweight by reducing redundancy and is easily parsed by many languages. YAML is a less-supported alternative which uses whitespace as syntax, making it even more readable, along with additional features, but its syntax is further from the C-standard.

What does JSON look like?

JSON is a very simple format with few grammatical rules. http://www.json.org provides clear diagrams of valid JSON syntax. JSON is used to represent objects in nested key/value pairs, just like how JavaScript objects are created.

How do I use JSON?

Following, I will give overviews on how to incorporate JSON in a few languages.

JavaScript

Because JSON is more or less valid JavaScript code, JSON code can be parsed into an object by simply evaluating the string.

var jsonstring = "{
    "firstname" : "Paul",
    "lastname" : "Shen",
    "phonenumbers" : [
        "123-456-7890",
        "234-567-8901"
    ]
}";

var person = eval("(" + jsonstring + ")");

alert("One phone number for " + person.firstname + " "
    + person.lastname + " is " + person.phonenumbers[0]);

Easier than navigating through a XML structure. Definitely easier than choosing a favorite color.

However, eval() is quite dangerous because basically any JavaScript code can be returned by an AJAX call. Here’s two JavaScript functions that can help you work with JSON code, one for parsing and the other to create a JSON string from an object. Of note, Prototype also provides a good looking function evalJSON(), which can also sanitize the string of any malicious code. jQuery, on the other hand, incorporates JSON handling into the Ajax handler, conveniently returning a JavaScript object instead of the JSON string.

Often times, you will use JSON as the interchange format for Ajax applications. One issue is that you may want the JSON string to be provided from an external source, in which case you will also want to look into JSONP, which allows padding to create a valid JavaScript document.

PHP

As of PHP >= 5.2.0, the JSON extension is bundled and compiled into PHP by default. PHP objects can be converted to a JSON string and vice versa with the functions json_encode and json_decode.

Here is an example modified from the one in the PHP manual:

<?php
$arr = array ('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5);
$json_string =  json_encode($arr);
echo $json_string; // Outputs {"a":1,"b":2,"c":3,"d":4,"e":5}

$obj = json_decode($json_string);
var_dump($obj);
/*
Ouputs the following:
object(stdClass)#1 (5) {
    ["a"] => int(1)
    ["b"] => int(2)
    ["c"] => int(3)
    ["d"] => int(4)
    ["e"] => int(5)
}
*/
?>

Although Javascript object properties are often times not in quotes, json_decode requires the opposite. This could be an issue if you are parsing a JSON string from an external source without quoted property names. The json_decode function accepts a second boolean parameter which specifies whether to return an associative array instead of an object.