JSON

1
JSON

• Java Script Object Noation

2
JSON is

• A lightweight data interchange format
• A replacement for XML
• Human readable
• Supports both hierarchical and unordered data
• Supported by most programming languages
• Supported by many modern web services
• Flickr, Blogger, c

3
Declaring a JSON object

• var mydata
• var mydata new object

4
Name Value Pairs (unorderd)

• var js
• runs client,
• released 1995,
• type scripting

5
Adding Depth

• var lang
• js runs client,
• released 1995,
• type scripting,
• php runs server,
• released 1994,
• type scripting

6
Arrays (ordered data)

• var employers
• colleges Sage, HVCC, RPI

7
Nesting

• Can nest
• arrays in arrays
• arrays in the value part of name/value pairs
• blocks of name/value pairs inside the value part
  of name/value pairs
• blocks of name/value pairs inside arrays

8
Access JSON Data

• As an object
• var blah lang.js.released
• // blah 1995
• var blah employers.colleges1
• // blah hvcc

9
Access JSON Data

• As an associative array
• var blah langjsreleased
• // blah 1995
• var blah employerscolleges1
• // blah hvcc

10
Getting JSON Data

• XmlHttpRequest GET
• For JSON resources on your service
• Call it from a script tag (within the src)
• Used to get data from 3rd party services
• Rewrite/reload script tag to get new data
• Call backs

11
Callback Functions

• Returns a json object as the first argument of a
  function call
• You write a function on your page to process json
  data
• You request a json object and specify a callback
  function name
• Service returns callback_name(json_object)
• Once script loads, function automatically runs

12
Callback Functions

• src http//json.site.dom?callbackgo
• Response would be
• go(blah blah, blahblah,
  blahblahblah)

13
Bedework Json

• Uses XSLT to return a json object
• You specify the object name
• Returns up to one months of data at a time
• ltscript src"http//events.rpi.edu/main/listEvent
  s.do?start2009-03-01end2009-03-31setappvarobj
  Name(cal)skinNamejson-list-src"gtlt/scriptgt

14
In Class Work

• Use a slider as a UI to event data
• Start with last classes slider demo
• Add script tag to get bedework cal data
• Set the end points on your slider
• Start unix timestamp for 2009-03-01
• End unix timestamp for 2009-03-31
• Step 3600 (one hour)

15
In Class Work

• Create a div under your slider
• When the slider is moved, print the summary for
  each event inside the current data/time range in
  the new div
• Help http//www.rpi.edu/gillw3/websys/json/help.
  txt