What is JSON?


JSON, or JavaScript Object Notation, has been getting a large amount of attention recently in the IT world. This is mostly powered by its extremely lightweight implementation, its common usage in API responses, and its already native support in JavaScript. JSON isn't simply a way to code objects in JavaScript, but it is the actual form that a JavaScript engine will map the object to in memory. In short, it is an extremely fast and powerful way of transporting data between two interfaces.

How does it work?


JSON is capable of setting up data constructs for integers, strings, arrays, and booleans - the most essential data building blocks. Using a carefully defined syntactical construct, JSON can be used to outline an object and with the use of javascript's eval() function, they can be converted to a working object.

But the power does not end there. Other popular programming languages have been implementing native support for JSON, such as PHP and ActionScript. For example, PHP can now convert an associative array of data into a JSON string by using the new json_encode() function, provided in version 5.2+ of the language. For languages without native support, you can find a full range of implementation classes available at the JSON website.

The Syntax: explained


Declaration


All JSON objects are declared with a pair of curly braces. You can assign them to a variable like you would any other data structure.

  1. var myObj = {}


That's it! While not very powerful, this is all that's required to create objects using JSON. So let's start adding some properties to this object.

Strings


We are going make this object represent me, so let's start by adding my name.

  1. var myObj = {name: 'Frank'}


Let's take a second to carefully look at what we did here. We wanted to add a property called "name", and to do so, you simply write the property, "name". We follow the property label by a colon to separate the property name and its value. To the right of the colon, comes the value. Since we wanted the value to be a string, we put it in quotes.

With the JSON we have put in place, you are now able to access the property by using the dot notation. To access a property, follow the "Variable [dot] property" construct.

  1. alert(myObj.name) // "Frank"


Integers


If we wanted to assign a property to the object of an integer data type, there is no need to quote the value.

  1. var myObj = {age: 24}


Multiple properties are separated by a comma.

  1. var myObj = {name: 'Frank', age: 24}
  2. alert("My name is " + myObj.name + " and I'm " + myObj.age);
  3. // "My name is Frank and I'm 24


Booleans


Like integers, booleans are also unquoted

  1. var myObj = {name: 'Frank', age: 24, engaged: true}


Arrays


Arrays can contain a collection of the previously mentioned data types. To define an array, wrap the value in square brackets and separate the values with commas.

Note: I will now add line breaks and indentation for legibility. It has no bearing on the working order of the object.

  1. var myObj = {
  2.     name: 'Frank',
  3.     age: 24,
  4.     engaged: true,
  5.     favorite_tv_shows: ['Lost', 'Dirty Jobs', 'Deadliest Catch', 'Man vs Wild']
  6. }


You can access a value in an array in the object by using a combination of the dot notation (to access the objects property) and index notation (to access an indexed value of an array).

  1. alert(myObj.favorite_tv_shows[1]); // "Dirty Jobs"


To take the array complexity one step further, an array can also contain other objects.

  1. var myObj = {
  2.     name: 'Frank',
  3.     age: 24,
  4.     engaged: true,
  5.     favorite_tv_shows: ['Lost', 'Dirty Jobs', 'Deadliest Catch', 'Man vs Wild'],
  6.     family_members: [
  7.         {name: "Frank", age: 57, relation: "father"},
  8.         {name: "Tina", age: 26, relation: "sister"}
  9.     ]
  10. }


This still requires dot and index notation, with an additional dot notation for accessing the property of the object found in the indexed array value.

  1. alert(myObj.family_members[1].name) // "Tina"


There is one situation where you will use square brackets to access an objects property and not the dot notation: when you are using a variable as the property name. For example:

  1. var myObj = {
  2.     name: 'Frank',
  3.     age: 24,
  4.     engaged: true,
  5.     favorite_tv_shows: ['Lost', 'Dirty Jobs', 'Deadliest Catch', 'Man vs Wild'],
  6.     family_members: [
  7.         {name: "Frank", age: 57, relation: "father"},
  8.         {name: "Tina", age: 26, relation: "sister"}
  9.     ]
  10. }
  11.  
  12. var property = "age"
  13.  
  14. alert(myObj[property]); // "24"


Recap


Take some time experimenting with JSON and you will see that you can pick up the concept and syntax rather quickly. As a caveat that may save you time in the future: certain languages require you to quote the property names, such as ActionScript. If not, it will complain.

  1. myObj = {name: "Frank"} // will complain
  2. myObj = {"name": "Frank"} // will work


Next, I will demonstrate how JSON is commonly used in API calls.