Download as PDF, PPTX
![[ { "displayname": "Bruce Lee", "email": "Bruce.lee@karate.com", "department": "stockroom" }, { "displayname": "mike", "email": "mike@Cathy.com ", "department": "kitchen" }, { "displayname": "scott", "email": "scott@Cathy.com ", "department": "Office" } ] static.json Example 5](https://image.slidesharecdn.com/introtojson-151210000605/75/Intro-to-JSON-5-2048.jpg)
![Creating JSON 1. Create a file and call it contacts.json 2. Type Name="Your Name Here" 3. Replace this with an array Contacts=["your name"," friend1","friend2"] 4. Turn the Array into an Object by replacing the [ ] with { } and adding name:value pairs Contacts = {"Name": "your name","Address": "123 Main Street","Phone Numbers": ["714-432-1234","714-8310-9754","714-765-4534"]} 6](https://image.slidesharecdn.com/introtojson-151210000605/75/Intro-to-JSON-6-2048.jpg)
![Creating JSON (p3) 1. contacts.json can now be used in a web application as it is. 2. You can also declare a JavaScript variable with it like this: var Contacts = {"Name": "your name","Address": "123 Main Street","Phone Numbers": ["714-432-1234", "714-8310-9754", "714-765-4534"]}; 3. Copy the above variable, and open the Chrome web browser 4. Right-click on the page and select Inspect Element, then click the Console tab 5. Paste the JavaScript variable into the console and press enter. Then type console.log(Contacts); 6. Notice the Object {Name: "your name", Address: "123 Main Street", Phone Numbers: Array[3]} 7. Open the Object and find the phone numbers inside it 8](https://image.slidesharecdn.com/introtojson-151210000605/75/Intro-to-JSON-8-2048.jpg)
Uploaded byGeorge McKinney
Intro to JSON
JavaScript Object Notation (JSON) is a lightweight text format for serializing structured data, derived from JavaScript object literals. It represents data using primitive types and structured types, making it easy to work with arrays and objects. JSON is efficient for data interchange, particularly in web applications, and can be validated and utilized effectively in JavaScript programming.
Intro to JSON
- 1.
- 2. JavaScript Object Notation 1.JavaScript Object Notation (JSON) is a text format for the serialization of structured data. It comes from object literals in JavaScript. 2. JSON can represent four primitive types (strings, numbers, booleans, and null) and two structured types (objects and arrays). 3. A string is a sequence of zero or more Unicode characters. 4. An object is an unordered collection of zero or more name/value pairs, where a name is a string and a value is a string, number, boolean, null, object, or array. An array is an ordered sequence of zero or more values. 5. JSON's design goals were for it to be minimal, portable, textual, and a subset of JavaScript. 2
- 3. About JSON ● Data-centric ●Requires name:value pairs ● Serializes data ● Smaller file size, fast ● Made of Arrays and Objects ● Subset of JavaScript ● Plays well with jQuery 3
- 4. Working with JSON LikeXML, JSON can be a text file as in staticdata.json JSON usually comes from a server such as http://api.openweathermap.org/data/2. 5/weather?q=tustin,%20ca 4
- 5. [ { "displayname": "Bruce Lee", "email":"Bruce.lee@karate.com", "department": "stockroom" }, { "displayname": "mike", "email": "mike@Cathy.com ", "department": "kitchen" }, { "displayname": "scott", "email": "scott@Cathy.com ", "department": "Office" } ] static.json Example 5
- 6. Creating JSON 1. Createa file and call it contacts.json 2. Type Name="Your Name Here" 3. Replace this with an array Contacts=["your name"," friend1","friend2"] 4. Turn the Array into an Object by replacing the [ ] with { } and adding name:value pairs Contacts = {"Name": "your name","Address": "123 Main Street","Phone Numbers": ["714-432-1234","714-8310-9754","714-765-4534"]} 6
- 7. Creating JSON (p2) 1.Contacts can now be used. Copy the code between the { } and paste it into http://jsonlint.com and click validate 2. If it is correct then it will say Valid JSON Modify the JSON until it does. 3. Add 2 more people to the Contacts JSON file and validate it. 7
- 8. Creating JSON (p3) 1.contacts.json can now be used in a web application as it is. 2. You can also declare a JavaScript variable with it like this: var Contacts = {"Name": "your name","Address": "123 Main Street","Phone Numbers": ["714-432-1234", "714-8310-9754", "714-765-4534"]}; 3. Copy the above variable, and open the Chrome web browser 4. Right-click on the page and select Inspect Element, then click the Console tab 5. Paste the JavaScript variable into the console and press enter. Then type console.log(Contacts); 6. Notice the Object {Name: "your name", Address: "123 Main Street", Phone Numbers: Array[3]} 7. Open the Object and find the phone numbers inside it 8
- 9. Review ● JSON iswidely used ● The syntax is simple and easily readable ● It is light-weight and great for using in AJAX- driven User Interfaces such as those created with jQuery UI 9
- 10. JSON Resources http://jsonformatter.curiousconcept.com http://jsonlint.com JSON ViewChrome Browser Extension https://chrome.google. com/webstore/detail/jsonview/chklaanhfefbnpoi 10