Kids Code & Computer Science

JSON, or JavaScript Object Notation, is an elegant way to organize data into key:value pairs and make web applications work like software.

In 2001, programmers who wanted to keep a constant connection open between a web browser and a web server had few choices. Flash or Java applets were common solutions. A constant connection is critical for web applications that work like software downloaded to your computer. Among other problems, web browsers shut down connections to remote servers every so often.

One solution to this connectivity problem is JSON. It recycles the connections between a web browser and remote server while providing a simple way to organize and transmit data.

JSON, or JavaScript Object Notation, may have started as part of the JavaScript language but it has become useful to any programming language where pairs of data are needed. It is language independent. JSON is used primarily to transfer data between web servers and web applications, as an alternative to XML with its more structured format.

With JSON, for example, data is organized into keys and their values. While keys need to be unique, values can be anything. The key in your pair can be a unique ID and the value a collection of data. In XML, another way to structure data, your collection of data would be broken down into a more structured set of tags. It is possible to have your collection of data be in XML format, but it’s not required. Your collection of data, for example, could be a binary file like an image. Or it could be co-ordinates for a map.

The JSON specification has data types and syntax. Data types include numbers, strings, booleans, objects, arrays, and null. These are the same or similar to any programming language. The JSON syntax is fairly simple: data is organized into pairs with commas (,) and braces {} used to mark off parts of a data file.

{
    "firstName": "John",
    "lastName": "Smith",
    "age": 25,
    "address": {
        "streetAddress": "21 2nd Street",
        "city": "New York",
        "state": "NY",
        "postalCode": 10021
    },
    "phoneNumbers": [
        {
            "type": "home",
            "number": "212 555-1234"
        },
        {
            "type": "fax",
            "number": "646 555-4567"
        }
    ]
}

Notice a few things with this example from Wikipedia:

• The first and last {} braces contain the full JSON record.
• key:value pairs are separated by a single colon (:).
• key:value pairs are defined by “” double quotes before and after the key or value.
• key:value pairs are separated from each other by a comma (,).
• Some values, for example, for the key address, can include their own set of key:value pairs marked off by {} braces.
• Some values, for example, for the key phoneNumbers, can include multiple sets of key:value pairs which are marked off by [] braces.

Data in JSON format is parsed by software applications, including Firefox, Internet Explorer, and other web browsers.

And if you want to learn a big word today, key:value pairs are also called associative arrays because keys are associated with their values in pairs.

Douglas Crockford is credited with realizing part of the JavaScript language could be adapted to solve the problem of maintaining connections between web browsers and remote servers, as well as provide a simple structure to organize data. Aside from Flash and Java applets, in 2001 other techniques included using web frames (remember those?) to silently refresh data in the web browser. JSON is a far more silent and elegant solution, with less impact on a web browser than Flash, Java applets, or frames.

If you use GMail or any web mail, then you know how JSON allows web browsers to act like Apple Mail or Microsoft Outlook, two software applications downloaded to computers to download, manage, and send email.

Learn More

JSON

http://www.json.org/
http://en.wikipedia.org/wiki/JSON
http://www.w3schools.com/json/
http://msdn.microsoft.com/en-us/library/bb299886.aspx
http://www.techterms.com/definition/json
http://www.copterlabs.com/blog/json-what-it-is-how-it-works-how-to-use-it/

Douglas Crockford

http://en.wikipedia.org/wiki/Douglas_Crockford
http://crockford.com/