Intro to JSON
0 likes461 views
Data-centric Requires name:value pairs Serializes data Smaller file size, fast Made of Arrays and Objects Subset of JavaScript Plays well with jQuery
![[
{
"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/85/Intro-to-JSON-5-320.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/85/Intro-to-JSON-6-320.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/85/Intro-to-JSON-8-320.jpg)
Intro to JSON
- 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 Like XML, 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. 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
- 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 is widely 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 View Chrome Browser Extension https://chrome.google. com/webstore/detail/jsonview/chklaanhfefbnpoi 10