JavaScript Object Notation (JSON)


Published on

JSON (JavaScript Object Notation) is an independent data exchange format. It is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate. In JSON, a data structure is a key / value pair. It is a subset of the JavaScript Specification (ECME-Script) and is therefore directly in JavaScript.

Published in: Technology
1 Comment
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

JavaScript Object Notation (JSON)

  1. 1. J ava S cript O bject Notation (JSON) Prepared by: Chandra Maul Sharma Software Engineer Oct -20-2011 BOSS Webtech Private Limited
  2. 2. What is JSON? <ul><li>JSON is syntax for storing and exchanging text information. Much like XML. </li></ul><ul><li>JSON is smaller than XML, and faster and easier to parse. </li></ul><ul><li>JSON stands for J ava S cript O bject N otation </li></ul><ul><li>JSON is lightweight text-data interchange format </li></ul><ul><li>JSON is language independent * </li></ul><ul><li>JSON is &quot;self-describing&quot; and easy to understand </li></ul>
  3. 3. JSON Example <ul><li>{ &quot;employees&quot;: [ </li></ul><ul><li>{ &quot;firstName&quot;:&quot;John&quot; , &quot;lastName&quot;:&quot;Doe&quot; }, </li></ul><ul><li>{ &quot;firstName&quot;:&quot;Anna&quot; , &quot;lastName&quot;:&quot;Smith&quot; }, </li></ul><ul><li>{ &quot;firstName&quot;:&quot;Peter&quot; , &quot;lastName&quot;:&quot;Jones&quot; } </li></ul><ul><li>] </li></ul><ul><li>} </li></ul>
  4. 4. Why Called JSON <ul><li>The JSON text format is syntactically identical to the code for creating JavaScript objects. </li></ul><ul><li>Because of this similarity, instead of using a parser, a JavaScript program can use the built-in eval() function and execute JSON data to produce native JavaScript objects. </li></ul>
  5. 5. JSON Example <ul><li><html> <body> </li></ul><ul><li><h2>JSON Object Creation in JavaScript</h2><p> </li></ul><ul><li>Name: <span id=&quot;jname&quot;></span><br /> </li></ul><ul><li>Age: <span id=&quot;jage&quot;></span><br /> </li></ul><ul><li>Address: <span id=&quot;jstreet&quot;></span><br /> </li></ul><ul><li>Phone: <span id=&quot;jphone&quot;></span><br /> </li></ul><ul><li></p> </li></ul><ul><li><script type=&quot;text/javascript&quot;> </li></ul><ul><li>var JSONObject= { </li></ul><ul><li>&quot;name&quot;:&quot;John Johnson&quot;, </li></ul>
  6. 6. <ul><li>&quot;street&quot;:&quot;Oslo West 555&quot;, </li></ul><ul><li>&quot;age&quot;:33, </li></ul><ul><li>&quot;phone&quot;:&quot;555 1234567&quot;}; </li></ul><ul><li>document.getElementById(&quot;jname&quot;) </li></ul><ul><li>document.getElementById(&quot;jage&quot;).innerHTML=JSONObject.age </li></ul><ul><li>document.getElementById(&quot;jstreet&quot;).innerHTML=JSONObject.street </li></ul><ul><li>document.getElementById(&quot;jphone&quot;) </li></ul><ul><li></script> </body> </li></ul><ul><li></html> </li></ul>
  7. 7. JSON Is Not... <ul><li>JSON is not a document format. </li></ul><ul><li>JSON is not a markup language. </li></ul><ul><li>JSON is not a general serialization format. </li></ul><ul><ul><li>No cyclical/recurring structures. </li></ul></ul><ul><ul><li>No invisible structures. </li></ul></ul><ul><ul><li>No functions . </li></ul></ul>
  8. 8. Why Used JSON? <ul><li>For AJAX applications, JSON is faster and easier than XML: </li></ul><ul><li>Using XML </li></ul><ul><li>Fetch an XML document </li></ul><ul><li>Use the XML DOM to loop through the document </li></ul><ul><li>Extract values and store in variables </li></ul><ul><li>Using JSON </li></ul><ul><li>Fetch a JSON string </li></ul><ul><li>eval() the JSON string </li></ul>
  9. 9. Languages <ul><li>ActionScript </li></ul><ul><li>C / C++ </li></ul><ul><li>C# </li></ul><ul><li>Cold Fusion </li></ul><ul><li>Delphi </li></ul><ul><li>E </li></ul><ul><li>Erlang </li></ul><ul><li>Java </li></ul><ul><li>Lisp </li></ul><ul><li>Perl </li></ul><ul><li>Objective-C </li></ul><ul><li>Objective CAML </li></ul><ul><li>PHP </li></ul><ul><li>Python </li></ul><ul><li>Rebol </li></ul><ul><li>Ruby </li></ul><ul><li>Scheme </li></ul><ul><li>Squeak </li></ul>
  10. 10. JSON Syntax Rules <ul><li>JSON syntax is a subset of the JavaScript object notation syntax. </li></ul><ul><li>Data is in name/value pairs </li></ul><ul><li>Data is separated by comma </li></ul><ul><li>Curly brackets holds objects </li></ul><ul><li>Square brackets holds arrays </li></ul>
  11. 11. JSON Values <ul><li>JSON values can be: </li></ul><ul><li>A number (integer or floating point) </li></ul><ul><li>A string (in double quotes) </li></ul><ul><li>A Boolean (true or false) </li></ul><ul><li>An array (in square brackets) </li></ul><ul><li>An object (in curly brackets) </li></ul><ul><li>null </li></ul>
  12. 12. Value
  13. 13. JSON Objects <ul><li>JSON objects are written inside curly brackets, </li></ul><ul><li>Objects can contain multiple name/values pairs: </li></ul><ul><li>Example : </li></ul><ul><li>{ &quot;firstName&quot;:&quot;John&quot; , &quot;lastName&quot;:&quot;Doe&quot; } </li></ul><ul><li>This is also simple to understand, and equals to the JavaScript </li></ul><ul><li>statements: </li></ul><ul><li>firstName = &quot;John“ </li></ul><ul><li>lastName = &quot;Doe&quot; </li></ul>
  14. 14. Object
  15. 15. Example Object { &quot;name&quot;: &quot;Jack B. Nimble&quot;, &quot;at large&quot;: true, &quot;grade&quot;: &quot;A&quot;, &quot;format&quot;: { &quot;type&quot;: &quot;rect&quot;, &quot;width&quot;: 1920, &quot;height&quot;: 1080, &quot;interlace&quot;: false, &quot;framerate&quot;: 24 } }
  16. 16. JSON Arrays <ul><li>JSON arrays are written inside square brackets. </li></ul><ul><li>An array can contain multiple objects: </li></ul><ul><li>{ &quot;employees&quot;: [ { &quot;firstName&quot;:&quot;John&quot; , &quot;lastName&quot;:&quot;Doe&quot; }, </li></ul><ul><li>{ &quot;firstName&quot;:&quot;Anna&quot; , &quot;lastName&quot;:&quot;Smith&quot; }, </li></ul><ul><li>{ &quot;firstName&quot;:&quot;Peter&quot; , &quot;lastName&quot;:&quot;Jones&quot; } ] } </li></ul><ul><li>In the example above, the object &quot;employees&quot; is an array </li></ul><ul><li>containing three objects. Each object is a record of a person </li></ul><ul><li>(with a first name and a last name). </li></ul>
  17. 17. Array
  18. 18. Strings <ul><li>Sequence of 0 or more Unicode characters </li></ul><ul><li>No separate character type </li></ul><ul><ul><li>A character is represented as a string with a length of 1 </li></ul></ul><ul><li>Wrapped in &quot; double quotes “ </li></ul><ul><li>Backslash escapement </li></ul>
  19. 20. Numbers <ul><li>Integer </li></ul><ul><li>Real </li></ul><ul><li>Scientific </li></ul><ul><li>No octal or hex </li></ul><ul><li>No NaN or Infinity </li></ul><ul><ul><li>Use null instead </li></ul></ul><ul><ul><li>Booleans : </li></ul></ul><ul><ul><li>A ) True </li></ul></ul><ul><ul><li>B ) False </li></ul></ul><ul><ul><li>NULL : </li></ul></ul><ul><li>A value that isn't anything </li></ul>
  20. 21. Arrays vs Objects <ul><li>Use objects when the key names are arbitrary strings. </li></ul><ul><li>Use arrays when the key names are sequential integers. </li></ul><ul><li>Don't get confused by the term Associative Array. </li></ul><ul><li>JSON Files : </li></ul><ul><li>The file type for JSON files is &quot;.json“ </li></ul><ul><li>The MIME type for JSON text is &quot;application/json&quot; </li></ul>
  21. 22. Rules <ul><li>A JSON decoder must accept all well-formed JSON text. </li></ul><ul><li>A JSON decoder may also accept non-JSON text. </li></ul><ul><li>A JSON encoder must only produce well-formed JSON text. </li></ul><ul><li>Be conservative in what you do, be liberal in what you accept from others. </li></ul>
  22. 23. JSONRequest <ul><li>A new facility. </li></ul><ul><li>Two way data interchange between any page and any server. </li></ul><ul><li>Exempt from the Same Origin Policy. </li></ul><ul><li>Campaign to make a standard feature of all browsers. </li></ul>
  23. 24. JSONRequest <ul><li>function done ( requestNr , value , exception ) { </li></ul><ul><li>... </li></ul><ul><li>} </li></ul><ul><li>var request = </li></ul><ul><li> url , data , done ); </li></ul><ul><li>var request = </li></ul><ul><li>JSONRequest.get( url , done ); </li></ul><ul><li>No messing with headers. </li></ul><ul><li>No cookies. </li></ul><ul><li>No implied authentication . </li></ul>
  24. 25. Arguments against JSON <ul><li>JSON Doesn't Have Namespaces. </li></ul><ul><li>JSON Has No Validator. </li></ul><ul><li>JSON Is Not Extensible. </li></ul><ul><li>JSON Is Not XML. </li></ul>
  25. 26. JSON is Not Extensible <ul><li>It does not need to be. </li></ul><ul><li>It can represent any non-recurrent data structure as is. </li></ul><ul><li>JSON is flexible. New fields can be added to existing structures without obsoleting existing programs. </li></ul>
  26. 27. JSON and PHP <ul><li>json_encode : </li></ul><ul><li><?php </li></ul><ul><li>$arr = array('a' => 1, 'b' => 2, 'c' => 3, 'd' => 4, 'e' => 5); echo json_encode($arr); </li></ul><ul><li>?> </li></ul><ul><li>The above example will output: </li></ul><ul><li>{&quot;a&quot;:1,&quot;b&quot;:2,&quot;c&quot;:3,&quot;d&quot;:4,&quot;e&quot;:5} </li></ul><ul><li>  </li></ul>
  27. 28. <ul><li>Json_decode : </li></ul><ul><li><?php $json = '{&quot;a&quot;:1,&quot;b&quot;:2,&quot;c&quot;:3,&quot;d&quot;:4,&quot;e&quot;:5}'; var_dump(json_decode($json)); var_dump(json_decode($json, true)); ?> </li></ul><ul><li>The above example will output: </li></ul><ul><li>object(stdClass)#1 (5) { </li></ul><ul><li>[&quot;a&quot;] => int(1) </li></ul><ul><li>[&quot;b&quot;] => int(2) </li></ul><ul><li>[&quot;c&quot;] => int(3) </li></ul><ul><li>[&quot;d&quot;] => int(4) </li></ul><ul><li>[&quot;e&quot;] => int(5) </li></ul><ul><li>} </li></ul><ul><li>array(5) { </li></ul><ul><li>[&quot;a&quot;] => int(1) </li></ul><ul><li>[&quot;b&quot;] => int(2) </li></ul><ul><li>[&quot;c&quot;] => int(3) </li></ul><ul><li>[&quot;d&quot;] => int(4) </li></ul><ul><li>[&quot;e&quot;] => int(5) </li></ul><ul><li>} </li></ul>
  28. 29. Creating JavaScript Objects <ul><li>< html > </li></ul><ul><li>< head > </li></ul><ul><li>< script src=&quot;;></ script >< script >// JavaScript source code will be here </li></ul><ul><li></ head > </li></ul><ul><li>< body > </li></ul><ul><li>< form name=&quot;personal&quot; action=&quot;&quot; method=&quot;POST&quot;> </li></ul><ul><li>Name < input type=&quot;text&quot; name=&quot;firstname&quot;>< br > </li></ul><ul><li>Email < input type=&quot;text&quot; name=&quot;email&quot;>< br > </li></ul><ul><li>Hobby </li></ul><ul><li>< input type=&quot;checkbox&quot; name=&quot;hobby&quot; value=&quot;sport&quot;> Sport </li></ul><ul><li>< input type=&quot;checkbox&quot; name=&quot;hobby&quot; value=&quot;reading&quot;> Reading </li></ul><ul><li>< input type=&quot;checkbox&quot; name=&quot;hobby&quot; value=&quot;music&quot;> Music </li></ul><ul><li>< input type=&quot;button&quot; name=&quot;valid&quot; value=&quot;Validate&quot; onclick=&quot;validate()&quot;> </li></ul><ul><li></ form > </li></ul><ul><li></ body ></ html > </li></ul>
  29. 30. <ul><li>function validate() </li></ul><ul><li>{ </li></ul><ul><li>var p = document.forms['personal'];  </li></ul><ul><li>var JSONObject = new Object; </li></ul><ul><li>JSONObject.firstname = p['firstname'].value; </li></ul><ul><li> = p['email'].value; </li></ul><ul><li>JSONObject.hobby = new Array;  </li></ul><ul><li>for ( var i=0; i<3; i++) { </li></ul><ul><li>JSONObject.hobby[i] = new Object; </li></ul><ul><li>JSONObject.hobby[i].hobbyName = p['hobby'][i].value; </li></ul><ul><li>JSONObject.hobby[i].isHobby = p['hobby'][i].checked; </li></ul><ul><li>}  </li></ul><ul><li>JSONstring = JSON.stringify(JSONObject); </li></ul><ul><li>runAjax(JSONstring); } </li></ul>
  30. 31. JSON object to PHP with AJAX <ul><li>var request; </li></ul><ul><li>function runAjax(JSONstring) </li></ul><ul><li>{ </li></ul><ul><li>request = getHTTPObject(); </li></ul><ul><li>request.onreadystatechange = sendData; </li></ul><ul><li>;GET&quot;, &quot;parser.php?json=&quot;+JSONstring, true); request.send(null);}  </li></ul><ul><li>// function is executed when var request state changes function </li></ul><ul><li>sendData() </li></ul><ul><li>{ // if request object received response </li></ul><ul><li>if(request.readyState == 4) { // parser.php response </li></ul><ul><li>var JSONtext = request.responseText; </li></ul><ul><li>// convert received string to JavaScript object </li></ul><ul><li>var JSONobject = JSON.parse(JSONtext);  </li></ul><ul><li>// notice how variables are used var msg = &quot;Number of errors: &quot;+JSONobject.errorsNum+ &quot;n- &quot;+JSONobject.error[0]+ &quot;n- &quot;+JSONobject.error[1];  </li></ul><ul><li>alert(msg); }} </li></ul>
  31. 32. JSON To PHP <ul><li><?php   </li></ul><ul><li>// decode JSON string to PHP object </li></ul><ul><li>$decoded = json_decode($_GET['json']);  // do something with data here   // create </li></ul><ul><li>response object $json = array(); </li></ul><ul><li>$json['errorsNum'] = 2; </li></ul><ul><li>$json['error'] = array(); </li></ul><ul><li>$json['error'][] = 'Wrong email!';$json['error'][] = 'Wrong hobby!';  </li></ul><ul><li>// encode array $json to JSON string </li></ul><ul><li>$encoded = json_encode($json);  </li></ul><ul><li>// send response back to index.html// and end script execution </li></ul><ul><li>die($encoded);  ?> </li></ul>
  32. 33. OUTPUT <ul><li>stdClass Object </li></ul><ul><li>( </li></ul><ul><li>[firstname] => fgfg </li></ul><ul><li>[email] => </li></ul><ul><li>[hobby] => Array </li></ul><ul><li> ( </li></ul><ul><li> [0] => stdClass Object </li></ul><ul><li> ( </li></ul><ul><li> [hobbyName] => sport </li></ul><ul><li> [isHobby] => 1 )  </li></ul><ul><li> [1] => stdClass Object ( </li></ul><ul><li> [hobbyName] => reading </li></ul><ul><li> [isHobby] => )  </li></ul><ul><li>[2] => stdClass Object </li></ul><ul><li> ( </li></ul><ul><li> [hobbyName] => music </li></ul><ul><li>[isHobby] => </li></ul><ul><li>)  )) </li></ul>
  33. 34. <ul><li>Thank You!! </li></ul>
  34. 35. <ul><li>BOSS Webtech is a process oriented design house specializing in web design, web development, backend web programming, mobile application development and other web and mobile related design and support services. </li></ul><ul><li>Recently launched BizPlus – Mobile based survey software. Check it more here </li></ul><ul><li>More products here </li></ul><ul><li>Contact BOSS Webtech </li></ul><ul><li>Call 831-998-9121 at US EST/CST/MST/PST Zone or email [email_address] </li></ul>About BOSS Webtech