JSON 2017 Fall Pusan National University KiJoune Li
- Slides: 12
JSON 2017, Fall Pusan National University Ki-Joune Li
PNU STEM JSON – Basic Concepts n JSON (Java. Script Object Notation) A Format (or Syntax) to store and exchange object data ¨ Text data ¨ Browser Java. Script Object Web Server JSON From Java. Script Object to JSON var my. Obj = { "name": "John", "age": 31, "city": "New York" }; var my. JSON = JSON. stringify(my. Obj); window. location = "demo_json. php? x=" + my. JSON; From JSON Object to Java. Script var my. JSON = '{ "name": "John", "age": 31, "city": "New York" }'; var my. Obj = JSON. parse(my. JSON); document. get. Element. By. Id("demo"). inner. HTML = my. Obj. name; 2
PNU STEM JSON – Basic Concepts n JSON (Java. Script Object Notation) ¨ Storing data in local storage as text data Java. Script Program Java. Script Object JSON Local Storage Storing data: my. Obj = { "name": "John", "age": 31, "city": "New York" }; my. JSON = JSON. stringify(my. Obj); local. Storage. set. Item("test. JSON", my. JSON); Reading data text = local. Storage. get. Item("test. JSON"); obj = JSON. parse(text); document. get. Element. By. Id("demo"). inner. HTML = obj. name; 3
PNU STEM Syntax n Use Java. Script Syntax Data is in name/value pairs ¨ Data is separated by commas ¨ Curly braces hold objects ¨ Square brackets hold arrays ¨ n { "name": "John", "age": 30, "car": null } JSON object in Java. Script ¨ JSON object is accessible in Java. Script var person = { "name": "John", "age": 31, "city": "New York" }; var x=person. name; var y=person["name"]; // named index var person["name"]="Guilbert"; 4
PNU STEM JSON – Data Types and Values n JSON values must be one of the following types ¨ ¨ ¨ n a string (should be always doubl-quoted): {"name": "John" } a number: {"name": "John" } an object (JSON object): { "employee": {"name": "John", "age": 30, "city": "New York" } } an array: {"employees": [ "John", "Anna", "Peter" ] } a boolean: {“married”: true} null: { “middlename”: null} JSON file: . json 5
PNU STEM JSON – Object n JSON Object ¨ ¨ ¨ n JSON objects are surrounded by curly braces {}. JSON objects are written in key/value pairs. Keys must be strings, and values must be a valid JSON data type (string, number, object, array, boolean or null). Keys and values are separated by a colon. Each key/value pair is separated by a comma. Accessing JSON Object within Java. Script my. Obj = { "name": "John", "age": 30, "car": null }; x = my. Obj. name; x = my. Obj["name"]; my. Obj = { "name": "John", "age": 30, "car": null }; for (x in my. Obj) { document. get. Element. By. Id("demo"). inner. HTML += my. Obj[x] + " "; } 6
PNU STEM JSON – Object n Nested JSON Objects ¨ Values in a JSON object can be another JSON object. my. Obj = { "name": "John", "age": 30, "cars": { "car 1": "Ford", "car 2": "BMW", "car 3": "Fiat" } } x = my. Obj. cars. car 2; //or: x = my. Obj. cars["car 2"]; my. Obj. cars["car 2"] = "Mercedes"; delete my. Obj. cars. car 2; 7
PNU STEM JSON – Object n JSON Array Objects ¨ Values in a JSON object can be another JSON object. <!DOCTYPE html> <body> <p>Loopin through an array using a for loop: </p> <p id="demo"></p> <script> var my. Obj, i, x = ""; my. Obj = { "name": "John", "age": 30, "cars": [ "Ford", "BMW", "Fiat" ] }; for (i = 0; i < my. Obj. cars. length; i++) { for (i in my. Obj. cars) { x += my. Obj. cars[i] + " "; } document. get. Element. By. Id("demo"). inner. HTML = x; </script> </body> </html> 8
PNU STEM JSON – Object my. Obj = { "name": "John", "age": 30, "cars": [ { "name": "Ford", "models": [ "Fiesta", "Focus", "Mustang" ] }, { "name": "BMW", "models": [ "320", "X 3", "X 5" ] }, { "name": "Fiat", "models": [ "500", "Panda" ] } 9
PNU STEM JSON – Parse and Stringify var obj = { "name": "John", "age": 30, "city": "New York"}; var my. JSON = JSON. stringify(obj); Convert Java. Script Object to JSON: Stringify Browser Java. Script Object JSON Web Server Convert JSON to Java. Script Objects: parsing var obj = JSON. parse('{ "name": "John", "age": 30, "city": "New York"}'); 10
PNU STEM JSON – XML vs. JSON n Both JSON and XML can be used to receive data from a web server. {"employees": [ { "first. Name": "John", "last. Name": "Doe" }, { "first. Name": "Anna", "last. Name": "Smith" }, { "first. Name": "Peter", "last. Name": "Jones" } ]} <employees> <employee> <first. Name>John</first. Name> <last. Name>Doe</last. Name> </employee> <employee> <first. Name>Anna</first. Name> <last. Name>Smith</last. Name> </employee> <employee> <first. Name>Peter</first. Name> <last. Name>Jones</last. Name> </employees> 11
PNU STEM JSON – XML vs. JSON n JSON is like XML Both JSON ¨ Both JSON languages ¨ Both JSON ¨ n and XML are "self describing" (human readable) and XML are hierarchical (values within values) and XML can be parsed and used by lots of programming and XML can be fetched with an XMLHttp. Reques JSON is unlike XML ¨ ¨ ¨ JSON doesn't use end tag JSON is shorter JSON is quicker to read and write JSON can be included within Java. Script (e. g. object, arrays) XML has to be parsed with an XML parser. JSON can be parsed by a standard Java. Script function JSON. parse 12
