JSON

JSON Introduction

JSON (acronym for JavaScript Object Notation) is a data interchange format, designed for human-readability. It's lightweight, text-based, open standard and usually serves as an alternative to XML to transmit data over a network or between a server and a web application.

JSON was a subset of the JavaScript programming language, but despite its relationship, it's considered to be language-independent, with parsers available for almost every language.

JSON Data Types, Syntax and Structure

JSON Data Types:

Number

Either as Integer: (…,-1,0,1,…) or as Real: (3,141592…)

String

double-quoted Unicode: "Jonh Doe"

Boolean

true or false

Array

an ordered sequence of values, comma-separated and enclosed in square brackets [ ]:

["Value1","Value2","Value2"]

Object

a collection of key:value pairs, comma-separated and enclosed in curly braces { }:

{"Key1":"Value1" , "Key2":"Value2" , "Key3":"Value3"}

Null Value

null

JSON Syntax and Structure

A typical JSON file could be presented like this:

{
	"firstName": "John", 						//String
	"lastName": "Doe",
	"age": 39,  							//Number
	"has_kids": false,  						//Boolean
	"Hobbies":["Reading","Skating","Music"]				//Array
	"address": { 							//Object
		"streetAddress": "Somewhere over the rainbow 2-1",
		"city": "New York",
		"postalCode": 10021
	},
	"phoneNumber": [						//Array and Object
		{ "type": "home", 
		  "number": 2125551234 },
		{ "type": "fax", 
		  "number": null					//null value 
		}],
}

_{However, like Javascript, JSON can be formatted to be single-line.}

Pratical Examples with JavaScript

Fetch and Include JSON File

I will show now, how to use JavaScript to print JSON files on a HTML page. I will use the #Twitter API to get a JSON file.

http://twitter.com/statuses/public_timeline.json this link allow us to download a JSON file with the last 20 public tweets on Twitter. Due security reasons (XSS), we can not fetch the file with using XmlHttpRequest (AJAX) directly as so, we include it directly in the HTML page:

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Your Website</title>
	</head>
	<body>
	
	<script type="text/javascript" src="http://twitter.com/statuses/public_timeline.json?
callback=public_timeline"></script>
	</body>
</html>

Print the JSON values

Notice the ?callback=public_timeline? We're using it, because if we download the file directly, we won't be able to use it sincee it's not assigned to any variable, or object or any other kind of javascript resource, so the Twitter API allow us to call the file with a callback function and so making the file usable for manipulation.

We now have the JSON file with a callback function to make it usable. We print its values by adding the following script:

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Your Website</title>
	</head>
	<body>
	
	<script type="text/javascript" src="http://twitter.com/statuses/public_timeline.json?
callback=public_timeline"></script>
	<script type="text/javascript">
		var tweet;
		function public_timeline(data){
			tweet = data;
			for(var i in tweet){
				document.write(tweet[i].user.name);
				document.write(tweet[i].text);
				document.write(tweet[i].created_at);
			}
		}
	</script>
	</body>
</html>

Because JSON is natively Javascript we don't need to parse it, in this particular example, and we can itinerate it's values directly using the dot syntax.

Twitter