What is JSON?
JSON stands for JavaScript Object Notation
JSON is lightweight text-data interchange format
JSON is language independent *
JSON is "self-describing" and easy to understand
JSON uses JavaScript syntax for describing data objects, but JSON is still language and platform
*
independent. JSON parsers and JSON libraries exists for many different programming languages.
The JSON text format is syntactically identical to the code for creating JavaScript objects.
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.
Example:
var JSONObject= {
"name":"John Johnson",
"street":"Oslo West 555",
"age":33,
"phone":"555 1234567"};
Much Like XML
JSON is plain text
JSON is "self-describing" (human readable)
JSON is hierarchical (values within values)
JSON can be parsed by JavaScript
JSON data can be transported using AJAX
Much Unlike XML
No end tag
Shorter
Quicker to read and write
Can be parsed using built-in JavaScript eval()
Uses arrays
No reserved words
JSON Syntax Rules
JSON syntax is a subset of the JavaScript object notation syntax.
Data is in name/value pairs
Data is separated by comma
Curly brackets holds objects
Square brackets holds arrays
JSON Name/Value Pairs
JSON data is written as name/value pairs.
A name/value pair consists of a field name (in double quotes), followed by a colon, followed by a value:
"firstName" : "John"
JSON Values
JSON values can be:
A number (integer or floating point)
A string (in double quotes)
A Boolean (true or false)
An array (in square brackets)
An object (in curly brackets)
null
JSON Objects
JSON objects are written inside curly brackets,
Objects can contain multiple name/values pairs:
{ "firstName":"John" , "lastName":"Doe" }
JSON Arrays
JSON arrays are written inside square brackets.
An array can contain multiple objects:
{
"employees": [
{ "firstName":"John" , "lastName":"Doe" },
{ "firstName":"Anna" , "lastName":"Smith" },
{ "firstName":"Peter" , "lastName":"Jones" }
]
}
Example in Javascript:
var employees = [
{ "firstName":"John" , "lastName":"Doe" },
{ "firstName":"Anna" , "lastName":"Smith" },
{ "firstName":"Peter" , "lastName": "Jones" }
];
JSON Files
The file type for JSON files is ".json"
The MIME type for JSON text is "application/json"
One of the most common use of JSON is to fetch JSON data from a web server (as a file or as an
HttpRequest), convert the JSON data to a JavaScript object, and then it uses the data in a web page.
JSON Example - Object From String
Create a JavaScript string containing JSON syntax:
var txt = '{ "employees" : [' +
'{ "firstName":"John" , "lastName":"Doe" },' +
'{ "firstName":"Anna" , "lastName":"Smith" },' +
'{ "firstName":"Peter" , "lastName":"Jones" } ]}';
The eval() function uses the JavaScript compiler which will parse the JSON text and produce a
JavaScript object. The text must be wrapped in parenthesis to avoid a syntax error:
var obj = eval ("(" + txt + ")");
[Link][1].firstName returns: Anna
JSON Parser
The eval() function can compile and execute any JavaScript. This represents a potential security
problem.
It is safer to use a JSON parser to convert a JSON text to a JavaScript object. A JSON parser will
recognize only JSON text and will not compile scripts.
In browsers that provide native JSON support, JSON parsers are also faster.
Native JSON support is included in newer browsers and in the newest ECMAScript (JavaScript)
standard.
Web Browsers Support Web Software Support
Firefox (Mozilla) 3.5 jQuery
Internet Explorer 8 Yahoo UI
Chrome Prototype
Opera 10 Dojo
Safari 4 ECMAScript 1.5
Other Complex Examples:
A Typical Object:
myObject = {
"first": "John",
"last": "Doe",
"age": 39,
"sex": "M",
"salary": 70000,
"registered": true
}
[Link] returns 70000
myObject["salary"] returns 70000
Object with nested Array:
myObject = {
"first": "John",
"last": "Doe",
"age": 39,
"sex": "M",
"salary": 70000,
"registered": true,
"interests": [ "Reading", "Mountain Biking", "Hacking" ]
}
[Link][0] returns Reading
myObject["interests"][0] returns Reading
Object with Nested Object:
myObject = {
"first": "John",
"last": "Doe",
"age": 39,
"sex": "M",
"salary": 70000,
"registered": true,
"favorites": {
"color": "Blue",
"sport": "Soccer",
"food": "Spaghetti"
}
}
[Link] returns Spaghetti
myObject["favorites"]["food"] returns Spaghetti
Object with nested Arrays and Objects:
myObject = {
"first": "John",
"last": "Doe",
"age": 39,
"sex": "M",
"salary": 70000,
"registered": true,
"interests": [ "Reading", "Mountain Biking", "Hacking" ],
"favorites": {
"color": "Blue",
"sport": "Soccer",
"food": "Spaghetti"
},
"skills": [
{
"category": "Javascript",
"tests": [
{ "name": "One", "score": 90 },
{ "name": "Two", "score": 96 }
]
},
{
"category": "CouchDB",
"tests": [
{ "name": "One", "score": 79 },
{ "name": "Two", "score": 84 }
]
},
{
"category": "[Link]",
"tests": [
{ "name": "One", "score": 97 },
{ "name": "Two", "score": 93 }
]
}
]
}
[Link][0].category returns Javascript
myObject["skills"][0]["category"] returns Javascript
[Link][1].tests[0].score returns 79
myObject["skills"][1]["tests"][0]["score"] returns 79