Readings

http://www.w3schools.com/json/default.asp (This is the first of about 4 short pages. Please read all of them.)
http://en.wikipedia.org/wiki/JSON This has basic definitions. You can skip the part about "Schema" You might find the comparison with XML interesting, since we just learned it. JSON is way more intuitive than XML.
http://www.json.org/ The reference for all kinds of libraries to process JSON notation. The "railroad track" syntax diagrams are worth a glance, and just knowing about this resource is good.
http://en.wikipedia.org/wiki/JSONP An important variation on JSON is JSONP, used by lots of websites. jQuery has a special method devoted to it. This is *the* way to do cross-site data access.

Lecture Notes Start Here

JSON

The more I learn about JavaScript, the more I love it. We can offload a lot of processing for web applications from the server to the browser, doing the coding in JavaScript instead of PHP, Python or Java.

But, in order to do the data processing with JavaScript, we need a good data representation that is easy to process in JavaScript. JSON is that notation.

With JSON, we can:

Load data in JSON format from a server, using Ajax.
Format the data in the browser, using JavaScript
Search and sort the data in the browser, using JavaScript
Update the data from the browser, sending updates back to the server, but not having to re-load the page, again using Ajax.

We did all but the last of these in Tandora, and we planned to do the last one (but just ran out of time). The result was lightning-fast searching and sorting.

JSON as a Data Structure

It's a hierarchical structure consisting of

Objects (key/value pairs, keys are strings)
Arrays
Atomic Values: Strings, Numbers, Booleans, and Null

JSON in Tandora

We'll take a few minutes to explore Tandora. Before we get to the code, here's the basic idea:

The main page loads. It has the markup for the structure of the page (divs, headers, banner images, etc) and the CSS to make everything look pretty, but no data
After the page loads, the data is loaded as a bunch of JSON, actually an array.
A function runs over that array, taking each element and formatting it with divs and spans and stuff.
When we do a search, the search function runs over the array, copying out the matching elements, and taking that sub-array and formatting all the elements, in the same way as the previous bullet item. Surprisingly, that's pretty fast. It would be even faster just to toggle the CSS display property to none for elements we don't want, but we didn't think of that (or, rather, we worried about interaction with other code).
When the user wants to sort the presentation, we just sort the array using the JavaScript sort method, and then re-format the array again.

Okay, let's get a little glimpse of the code.

presentations.json is the book, in JSON format. In this case, we could use a simple file, since this part of the data is read-only (users won't modify it). Thus, it requires zero database processing to produce this data. It can even be cached.
The previous file is a little hard to read, so I've made a human-readable version
Tandora main page, which loads the data after the document is ready. Do:
1. View source, and scroll down to
```
jQuery(document).ready( ... )
```
2. Look for a call to getPresentationResults
3. Look for the definition of getPresentationResults in presentations-sortable.js. (It's at the end; go to the end and scroll backwards).
4. Look a little further back for receiveResults().
5. If you're feeling jQuery courageous, look even earlier for redoPresentationResults. This formats the presentations, but then re-creates the event handlers for all of them.
formatting a search item (compact display) is done by smallResult, which is the same as resultTemplate. (The connection between these functions and the presentationResults object isn't obvious, but the object can be given a function to format (stringify) each selected and sorted element.) You can find resultTemplate near the top of presentations-sortable.js.
formatting a detail item (big display) is done by detailTemplate in presentations-detail.js.
Building the book: an example of time/space tradeoff. The .json file we looked at above is created by a PHP script. Most of the code of this file is just constructing the query results. Turning it into JSON is trivial, thanks to the PHP json_encode function. This function is invoked at the end of the script.

Same Origin Policy

Okay, so loading JSON data is easy and cool. But there's trouble getting data from different servers due to a browser security issue, namely the Same Origin Policy, which is that the browser will not grant an Ajax request to a different server.

Here's a variation on that human-readable version only this one tries to get the data from http://www.scott-anderson.org/demos/presentations.json, which is a different server:

human-readable version, foreign server.

We'll all look, using Firebug, at what happens in this case: the request is silently ignored. No error message, just no data.

JSONP

A clever work-around to the Same Origin Policy is called JSONP. It can make your head hurt, but here's the basic idea:

The script element is exempt from the policy. The src attribute of a script element can reference any server. (That's how you can load jQuery from the CDN or Google servers, for example.)
```
 <script src="http://any.site.com/path/to/file"></script> 
```
The script element will execute whatever code is retrieved via the src attribute.
Of course, that's no good if the code is just JSON data, because executing it doesn't give your program anything. Consider the following:
```
 <script>["Peter Jackson","David Lean","Akira Kurosawa"]</script> 
```
But what if you could convince the data source to return something like this:
```
 <script>fred(["Peter Jackson","David Lean","Akira Kurosawa"])</script> 
```
And, if you had defined the fred function like this, you could process the data. This function is the callback function.
```
   
```
A bit more detail: you tell the server the name of the function you would like wrapped around your data, and you ensure that that function is defined in JavaScript.

Here's a working example:

Here's the script element:

But, of course, that has no effect. Instead, we need to wrap the result in something, so we need a different PHP script:

Let's see it in action:

data goes here

One last step: This is all well and good, but we'd like to dynamically create these JSONP requests. Well, we can once we realize that we can dynamically add script elements to a page. That's what the jQuery.getJSON() method does.

JSON and JavaScript

Not surprisingly, JSON is easy to handle in JavaScript:

Braces denote a JavaScript object, which is a set of key/value pairs.

 >>> fred = {"name": "fred", "brother":"george", "hair":"red"}
 >>> fred.brother
 "george"
 >>> prop = "hair"
 >>> fred[prop]
 "red"
 >>> for( p in fred ) {
      console.log(fred[p]);
     }
 >>> "george"
 >>> "red"
 >>> "fred"

Square brackets denote a JavaScript array, which works pretty much as you expect:

  >>> weasleys = ["bill","charlie","percy","fred","george","ron","ginnie"]
  >>> weasleys.length
  7
  >>> weasleys[3]
  "fred"

atoms are numbers, strings, and null

It's helpful to be able to tell what type something is

>>>var what = Object.prototype.toString;
>>> what.call("fred")
"[object String]"
>>> what.call(3)
"[object Number]"
>>> what.call([3])
"[object Array]"
>>> what.call({a:3))
"[object Object]"
>>> what.call(true);
"[object Boolean]"
>>> what.call(false);
"[object Boolean]"
>>> what.call(null);
"[object Null]"

You can convert a string containing JSON notation into an object by using eval(), but don't. If there's nefarious code in there, it'll be executed. Instead, use:
```
  var x = JSON.parse('{"a":1,"b":2}');

  var y = JSON.stringify(x);
```

JSON and PHP

We've seen that there is nice support for JSON notation in PHP

When traversing a JSON data structure, it's helpful to know about gettype,

JSON in Python

Similarly, there is good support for JSON notation in Python thanks to the JSON module.

This isn't too surprising, since a Python dictionary is the same thing as a JSON object, and all the other data (arrays, numbers, strings) translate easily.

For type checking in Python, try type(o) and isinstance(o,type)

JSON in Java

There are many packages for processing JSON in Java. One by Douglas Crockford himself is JSON in Java.

I wrote an example of it in action, traversing a JSON entity to pretty-print it.

The basic idea:

There is a pprint method that is polymorphic:
- a Java Object
- a JSONArray
- a JSONObject (a set of key/value pairs like a PHP associative array, a Python dictionary or a Java hashtable).
It pretty prints the data structure by recursively traversing it, keeping track of the depth and indenting appropriately.
The driver functions start the depth at zero and optionally print a newline after printing the thing.
The main function prints some built-in test cases and anything on the command line.

The code:

JSONpprint.java

    cd ~cs304/pub/servlets/WEB-INF/classes
    java JSONpprint | more

Exercise on traversing JSON

Using your favorite language, write some pseudo-code for counting the number of atoms in a JSON data structure.

Once you can do this, you can do pretty much anything: search for something, modify the data structure, etc.

There are 6221 atoms in the Tandora book.

[an error occurred while processing this directive]