1. JSON (Copied from www.w3schools.com and from Prof Da Silva)www.w3schools.com Week 12 Web site: http://fog.ccsf.edu/~hyip

2. JavaScript Review - Array Create JavaScript Array: var js_ary = ["John", "Doe"]; OR var js_ary = new Array(); js_ary[0] = "John"; js_ary[1] = "Doe"; Display JavaScript Array: document.write(" ", js_ary[0], " ", js_ary[1], " "); http://fog.ccsf.edu/~hyip/cnit131a/12/samples/01_javascript _array.html http://fog.ccsf.edu/~hyip/cnit131a/12/samples/01_javascript _array.html

3. JavaScript Review - Object Create JavaScript Object: var js_obj = { firstName : "John", lastName : "Doe" }; OR var js_obj = new Object(); js_obj.firstName = "John"; js_obj.lastName = "Doe“; Display JavaScript Object: document.write(" ", js_obj.firstName, " ", js_obj.lastName, " "); Display JavaScript Object using Associative Array: document.write(" ", js_obj["firstName"], " ", js_obj["lastName"], " "); http://fog.ccsf.edu/~hyip/cnit131a/12/samples/02_javascript_objec t.html http://fog.ccsf.edu/~hyip/cnit131a/12/samples/02_javascript_objec t.html

4. JavaScript Object embedded in Array Create JavaScript Array with object inside: var js_ary = [ { firstName : "Joe" }, { lastName : "Doe" } ]; Display JavaScript Array: document.write(" ", js_ary[0].firstName, " ", js_ary[1].lastName, " "); Use Associative Array for the Object: document.write(" ", js_ary[0]["firstName"], " ", js_ary[1]["lastName"], " "); http://fog.ccsf.edu/~hyip/cnit131a/12/samples/03_javascript _object_embedded_in_array.html http://fog.ccsf.edu/~hyip/cnit131a/12/samples/03_javascript _object_embedded_in_array.html

5. JavaScript Array embedded in Object Create JavaScript Object with Array inside: var js_obj = { firstName : ["John"], lastName : ["Doe"] }; Display JavaScript Object: document.write(" ", js_obj.firstName[0], " ", js_obj.lastName[0], " "); Use Associative Array for the Object: document.write(" ", js_obj["firstName"][0], " ", js_obj["lastName"][0], " "); http://fog.ccsf.edu/~hyip/cnit131a/12/samples/04_jav ascript_array_embedded_in_object.html http://fog.ccsf.edu/~hyip/cnit131a/12/samples/04_jav ascript_array_embedded_in_object.html

6. What is JSON? JSON is short for JavaScript Object Notation. JSON is a syntax for storing and exchanging data. JSON is an easier-to-use alternative to XML.

7. Characteristics of JSON Lightweight, text-based open standard for data interchange It has been extended from the JavaScript language The extension of the file is.json The internet media type is application/json and the uniform type identifier is public.json It is used when writing JavaScript based application which includes browser extension and websites It is used for transmitting structured data over network connection Primarily used to transmit data between server and web application Easy to read and write and language independent Note: Although JSON is an extension of JavaScript, it is also available in many different languages such as: C, Ruby, Python, etc.

8. Sample JSON – three employee records {"employees":[ {"firstName":"John", "lastName":"Doe"}, {"firstName":"Anna", "lastName":"Smith"}, {"firstName":"Peter", "lastName":"Jones"} ]}

9. Sample XML – three employee records John Doe Anna Smith Peter Jones

10. JSON Evaluates to JavaScript Objects The JSON format is syntactically identical to the code for creating JavaScript objects. Because of this similarity, instead of using a parser (like XML does), a JavaScript program can use standard JavaScript functions to convert JSON data into native JavaScript objects.

11. JSON Similar to XML Both JSON and XML is "self describing" (human readable) Both JSON and XML is hierarchical (values within values) Both JSON and XML can be parsed and used by lots of programming languages Both JSON and XML can be fetched with an XMLHttpRequest

12. JSON Different from XML JSON doesn't use end tag JSON is shorter JSON is quicker to read and write JSON can use arrays The biggest difference is:  XML has to be parsed with an XML parser, JSON can be parsed by a standard JavaScript function.

13. Why JSON? For AJAX applications, JSON is faster and easier than XML: Using XML  Fetch an XML document  Use the XML DOM to loop through the document  Extract values and store in variables Using JSON  Fetch a JSON string  JSON.Parse the JSON string

14. JSON Syntax JSON syntax is a subset of the JavaScript object notation syntax:  Data is in name/value pairs  Data is separated by commas  Curly braces hold objects  Square brackets hold arrays

15. JSON Data (Name and Value pair) JSON data is written as name/value pairs. A name/value pair consists of a field name (in double quotes), followed by a colon, followed by a value: "firstName":"John"

16. JSON Value JSON values can be:  A number (integer or floating point)  A string (in double quotes)  A Boolean (true or false)  An array (in square brackets)  An object (in curly braces)  null

17. JSON Data Types TypeDescription NumberDouble-precision floating-point format StringDouble-quoted Unicode with backslash escaping BooleanTrue or False ArrayOrdered sequence of values (values = string, number, true or false, null, etc) WhitespaceUse between any pair of tokens ObjectUnordered collection of key:value pairs Nullempty

18. JSON Number Octal and hexadecimal formats are not used No NaN or Infinity is used in Number Syntax: var json-object-name = {string: number_value, ……} Example: var obj = {marks: 97}

19. JSON String Sequence of zero or more double quoted characters with backslash escaping Syntax: var json-object-name = {string: number_value, ……} Example: var obj = {name: ‘Joseph’}

20. JSON String Types TypeDescription "Double quote \Reverse solidus /Solidus bBackspace fForm feed nNew line rCarriage return tHorizontal tab uFour hexadecimal digits

21. JSON Boolean Includes true or false values Syntax: var json-object-name = {string: true/false, ……} Example: var obj = {name: ‘Josh’, marks: 97, grad: true}

22. JSON Array Begins with [ and ends with ]. Values are separated by, (comma). Indexing canstart at 0 or 1 Syntax: [value, ………] Example: { “books”: [{“language”:”C”, “edition”:”first”}, {“language”:”C++”, “edition”:”third”}]}

23. JSON Whitespace Can be inserted between any pair of tokens Syntax: {string: “ “,……} Example: var a = “ bold”; var b = “ lab”

24. JSON null It means empty type Syntax: null Example: var i = null;

25. JSON Object JSON objects are written inside curly braces. Just like JavaScript, JSON objects can contain multiple name/values pairs: {"firstName":"John", "lastName":"Doe"}

26. Sample JSON Object JSON Object Rules:  Enclosed in curly braces.  Each name followed by : (colon) and name/value pairs separated by, (comma).  Keys must be strings and should be different from each other. Create JSON Object: var json_obj = { "firstName" : "John", "lastName" : "Doe" }; Display JSON Object: document.write(" ", json_obj.firstName, " ", json_obj.lastName, " "); Use Associative Array for the Object: document.write(" ", json_obj["firstName"], " ", json_obj["lastName"], " "); http://fog.ccsf.edu/~hyip/cnit131a/12/samples/05_json_object.html

27. JSON Arrays JSON arrays are written inside square brackets. Just like JavaScript, a JSON array can contain multiple objects: "employees":[ {"firstName":"John", "lastName":"Doe"}, {"firstName":"Anna", "lastName":"Smith"}, {"firstName":"Peter","lastName":"Jones"} ] In the example above, the object "employees" is an array containing three objects. Each object is a record of a person (with a first name and a last name).

28. JSON Object with Array Create JSON Object: var json_obj = { "employees" : [ {"firstName" : "John", "lastName" : "Doe" }, {"firstName" : "Anna", "lastName" : "Smith" }, {"firstName" : "Peter", "lastName" : "Jones" } ]}; Display JSON Object: document.write(" ", json_obj.employees[0].firstName, " ", json_obj.employees[0].lastName, " "); http://fog.ccsf.edu/~hyip/cnit131a/12/samples/06_json_object_wit h_array.html http://fog.ccsf.edu/~hyip/cnit131a/12/samples/06_json_object_wit h_array.html

29. JSON uses JavaScript Syntax Because JSON uses JavaScript syntax, no extra software is needed to work with JSON within JavaScript. With JavaScript you can create an array of objects and assign data to it, like this: var employees = [ {"firstName":"John", "lastName":"Doe"}, {"firstName":"Anna", "lastName":"Smith"}, {"firstName":"Peter","lastName": "Jones"} ]; The first entry in the JavaScript object array can be accessed like this: employees[0].firstName + " " + employees[0].lastName; // returns John Doe It can also be accessed like this: employees[0]["firstName"] + " " + employees[0]["lastName"]; // returns John Doe Data can be modified like this: employees[0].firstName = "Gilbert"; It can also be modified like this: employees[0]["firstName"] = "Gilbert";

30. JSON Files The file type for JSON files is ".json" The MIME type for JSON text is "application/json" A common use of JSON is to read data from a web server, and display the data in a web page. For simplicity, this can be demonstrated by using a string as input (instead of a file).

31. JSON Example – Converts JSON text to Object Create a JavaScript string containing JSON syntax: var text = '{ "employees" : [' + '{ "firstName":"John", "lastName":"Doe" },' + '{ "firstName":"Anna", "lastName":"Smith" },' + '{ "firstName":"Peter", "lastName":"Jones" } ]}'; JSON syntax is a subset of JavaScript syntax. The JavaScript function JSON.parse(text) can be used to convert a JSON text into a JavaScript object: var obj = JSON.parse(text); Use the new JavaScript object in your page: document.getElementById("demo").innerHTML = obj.employees[1].firstName + " " + obj.employees[1].lastName; http://fog.ccsf.edu/~hyip/cnit131a/12/samples/07_convert_string_to_json_object.html