learn JSON
1. What is JSON?
- JSON refers to JavaScript Object Notation ( Java Script Object Notation )
- JSON is a lightweight text data interchange format
- JSON is language independent: JSON uses Javascript syntax to describe data objects, but JSON is still language and platform independent. JSON parsers and JSON libraries support many different programming languages. JSON is currently supported in many dynamic (PHP, JSP, .NET) programming languages.
- JSON is self-describing and easier to understand
Similar to XML
- JSON is plain text
- JSON is "self-describing" (human readable)
- JSON has a hierarchical structure (values exist within values)
- JSON can be parsed by JavaScript
- JSON data can be transferred using AJAX
Difference from XML
- no closing tag
- Shorter
- Read and write faster
- Ability to parse using the built-in JavaScript eval() method
- use an array
Do not use reserved words
2. JSON - Convert to JavaScript Object
The JSON text format is syntactically identical to the code that creates the JavaScript object.
Because of this similarity, without a parser, JavaScript programs can use the built-in eval() function to generate native JavaScript objects from JSON data.
3. JSON syntax rules
JSON syntax is a subset of JavaScript Object Notation syntax.
- Data is in name/value pairs
- Data is separated by commas
- Curly braces hold the object
- Square brackets hold arrays
4. JSON name/value pairs
JSON data is written in the form of name/value pairs.
Name/value pairs include the field name (in double quotes), followed by a colon, and then the value:
"firstName" : "John"
This is easy to understand and is equivalent to this JavaScript statement:
firstName = "John"
5. JSON value
JSON values can be:
- number (integer or float)
- string (in double quotes)
- logical value (true or false)
- array (in square brackets)
- object (in curly braces)
- null
6. JSON instance
With our editor, you can edit your JavaScript code online and see the result with the click of a button:
<html>
<body>
<h2>Creating JSON objects in JavaScript</h2>
<p>
Name: <span id="jname"></span><br />
Age: <span id="jage"></span><br />
Address: <span id="jstreet"></span><br />
Phone: <span id="jphone"></span><br />
</p>
<script type="text/javascript">
var JSONObject= {
"name":"Bill Gates",
"street":"Fifth Avenue New York 666",
"age":56,
"phone":"555 1234567"};
document.getElementById("jname").innerHTML=JSONObject.name
document.getElementById("jage").innerHTML=JSONObject.age
document.getElementById("jstreet").innerHTML=JSONObject.street
document.getElementById("jphone").innerHTML=JSONObject.phone </script>
</body> </html>