1. JSON JavaScript Object Notation

2. Introduction (What is JSON?) A lightweight text based data-interchange format Language independent Subset of JavaScript object (object with only properties and values without function/method) Easy to understand, manipulate, and generate It’s not a document format, markup language, or programming language

3. JSON == XML Plain text format “Self-describing” (human readable) Hierarchical (values can contain list of other objects or values)

4. JSON != XML (advantage) Lighter and faster than XML JSON uses typed objects but XML values are type-less strings (must be parsed at runtime) Less syntax, no semantic JSON objects and their properties are immediately accessible to JavaScript

5. JSON != XML (disadvantage) JSON has lack of namespaces No facilities for validation (XML-DTD) and template for view (XML-XSLT) Not extensible

6. JSON’s General Syntaxes Object definition: { property_name_1 : value_1,..., property_name_n : value_n } List/Array: [ value_1,..., value_n ] The property_name is normally a string but value can be null, string, numeric, or other JSON object and list

7. Example How to represent student’s table data below using JSON? Student basic object definition (“Brendan Eich”): { "name":"Brendan Eich", "matric_no":"AC123", "cw": 50, "fe": 25 } NameMatric No.CourseworkFinal Exam Brendan EichAC1235025 Rasmus LerdofAC4565530

8. Example If we make “coursework” and “final exam” as properties of just another JSON object let say “marks”: { "name":"Brendan Eich", "matric_no":"AC123", "marks": {"cw": 50, "fe": 25 } }

9. Example Complete student list in JSON format: [ { "name":"Brendan Eich", "matric_no":"AC123", "marks": {"cw": 50, "fe": 25 } }, { "name":"Rasmus Lerdof", "matric_no":"AC456", "marks": {"cw": 55, "fe": 30 } } ]

10. Implementation (jQuery) Client createlocal_listlocal.html testJSON(); var students = [...]; [1] [2]

11. Implementation (jQuery) createlocal_listlocal.html (part 1)... $(document).ready(function() { testJSON(); }); function testJSON() { var students = [ { "name":"Brendan Eich", "matric_no":"AC123", "marks": {"cw": 50, "fe": 25 } }, { "name":"Rasmus Lerdof", "matric_no":"AC456", "marks": {"cw": 55, "fe": 30 } } ]; /* Example to convert back to JSON string */ //alert(JSON.stringify(students)); [1]

12. Implementation (jQuery) createlocal_listlocal.html (part 2) var output = ""; for (var i = 0; i < students.length; i++) { var total = students[i].marks.cw + students[i].marks.fe; output += students[i].name + ", " + students[i].matric_no + ", " + total + "\n"; } $("pre").html(output); } [2]

13. Client-Server Implementation (jQuery, AJAX, & PHP) Client createlocal_listremote.html testJSON(); var students = [...]; [1] [4] Server parseJSON.php $students = json_decode(...);... AJAX (POST/GET) AJAX (text/plain) [2] [3]

14. Client-Server Implementation (jQuery, AJAX, & PHP) createlocal_listremote.html (part 1)... $(document).ready(function() { testJSON(); }); function testJSON() { var students = [ { "name":"Brendan Eich", "matric_no":"AC123", "marks": {"cw": 50, "fe": 25 } }, { "name":"Rasmus Lerdof", "matric_no":"AC456", "marks": {"cw": 55, "fe": 30 } } ]; /* Example to convert back to JSON string */ //$("div").text(JSON.stringify(students)); [1]

15. Client-Server Implementation (jQuery, AJAX, & PHP) createlocal_listremote.html (part 2)... var data = "json=" + JSON.stringify(students); $("div").load("http://.../parseJSON.php", data); } [2] / [3] / [4]

16. Client-Server Implementation (jQuery, AJAX, & PHP) parseJSON.php (part 1) <?php header("Content-type:text/plain"); header("Access-Control-Allow-Origin: *"); ?> Name Matric No. Total Mark...

17. Client-Server Implementation (jQuery, AJAX, & PHP) parseJSON.php (part 2)... <?php $students = json_decode($_REQUEST["json"]); //var_dump($students); foreach ($students as $student) { $total_mark = $student->{"marks"}->{"cw"} + $student->{"marks"}->{"fe"}; ?> {"name"}; ?> {"matric_no"}; ?> <?php } ?>

18. Client-Server Implementation (jQuery, AJAX, PHP, & MySQL) Client createremote_listlocal.html testJSON(); JSON.parse(...); [4] [5] Server createJSON.php... $json_str = json_encode(...);... AJAX (POST/GET) AJAX (text/plain) [1] [3] MySQL DB Table [2]