JSON(JavaScript Object Notation)

JSON: JavaScript Object Notation.
JSON is a syntax for storing and exchanging data.
JSON is an easier-to-use alternative to XML.

JSON Example
{"employees":[
{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter", "lastName":"Jones"}
]}

The following XML example also defines an
employees object with 3 employee records:
<employees>
<employee>
<firstName>John</firstName> <lastName>Doe</lastName>
</employee>
<employee>
<firstName>Anna</firstName> <lastName>Smith</lastName>
</employee>
<employee>
<firstName>Peter</firstName> <lastName>Jones</lastName>
</employee>
</employees>

JSON - Evaluates to JavaScript Objects
The JSON format is syntactically identical to the code for creating JavaScript objects.
Because of this similarity, instead of using a parser (like XML does), a JavaScript program can use
standard JavaScript functions to convert JSON data into native JavaScript objects.

JSON Example
<!DOCTYPE html>
<html>
<body>
<h2>JSON Object Creation in JavaScript</h2>
<p id="demo"></p>
<script>
var text = '{"name":"John Johnson","street":"Oslo West 16","phone":"555 1234567"}';
var obj = JSON.parse(text);
document.getElementById("demo").innerHTML =
obj.name + "<br>" +
obj.street + "<br>" +
obj.phone;
</script>
</body>
</html>

JSON Syntax Rules
JSON syntax is derived from JavaScript object notation syntax:
Data is in name/value pairs
Data is separated by commas
Curly braces hold objects
Square brackets hold arrays

JSON Data - A Name and a Value
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:

JSON Objects
JSON objects are written inside curly braces.
Just like JavaScript, JSON objects can contain multiple name/values pairs:

{"firstName":"John", "lastName":"Doe"}

JSON Arrays
JSON arrays are written inside square brackets.
Just like JavaScript, a JSON array can contain multiple objects:

"employees":[
{"firstName":"Peter","lastName":"Jones"}
]

In the example above, the object "employees" is an array containing three objects. Each object is
a record of a person (with a first name and a last name).

JSON Uses JavaScript Syntax
Because JSON syntax is derived from JavaScript object notation, very little extra software is
needed to work with JSON within JavaScript.
With JavaScript you can create an array of objects and assign data to it, like this:

var employees = [
{"firstName":"Peter","lastName": "Jones"}
];

employees[0].firstName + " " + employees[0].lastName;

employees[0]["firstName"] + " " + employees[0]["lastName"];

A common use of JSON is to read data from a web server, and display the data in a web page.
For simplicity, this can be demonstrated by using a string as input (instead of a file).
JSON Example - Object From String
Create a JavaScript string containing JSON syntax:

var text = '{ "employees" : [' +
'{ "firstName":"John" , "lastName":"Doe" },' +
'{ "firstName":"Anna" , "lastName":"Smith" },' +
'{ "firstName":"Peter" , "lastName":"Jones" } ]}';
JSON syntax is a subset of JavaScript syntax.
The JavaScript function JSON.parse(text) can be used to convert a JSON text into a JavaScript
object:

<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script>

Using eval()
Older browsers without the support for the JavaScript function JSON.parse() can use the eval()
function to convert a JSON text into a JavaScript object:
var obj = eval ("(" + text + ")");

JSON Http Request
A common use of JSON is to read data from a web server, and display the data in a web page.
This chapter will teach you, in 4 easy steps, how to read JSON data, using XMLHttp.

<div id="id01"></div>
<script>
var xmlhttp = new XMLHttpRequest();
var url = "myTutorials.txt";
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var myArr = JSON.parse(xmlhttp.responseText);
myFunction(myArr);
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
function myFunction(arr) {
var out = "";
var i;
for(i = 0; i < arr.length; i++) {
out += '<a href="' + arr[i].url + '">' +
arr[i].display + '</a><br>';
}
document.getElementById("id01").innerHTML = out;
}
</script>

Example Explained
1: Create an array of objects.
Use an array literal to declare an array of objects.
Give each object two properties: display and url.
Name the array myArray:

var myArray = [
{
"display": "JavaScript Tutorial",
"url": "http://www.w3schools.com/js/default.asp"
},
{
"display": "HTML Tutorial",
"url": "http://www.w3schools.com/html/default.asp"
},
{
"display": "CSS Tutorial",
"url": "http://www.w3schools.com/css/default.asp"
}
]

2: Create a JavaScript function to display the array.
Create a function myFunction() that loops the array objects, and display the content as HTML
links:

var out = "";
var i;
out += '<a href="' + arr[i].url + '">' + arr[i].display + '</a><br>';
}
}

3: Create a text file
Put the array literal in a file named myTutorials.txt:
[
{
},
{
},
{
}
]

4: Read the text file with an XMLHttpRequest
Write an XMLHttpRequest to read the text file, and use myFunction() to display the array:

var url = "myTutorials.txt";
xmlhttp.onreadystatechange = function() {
var myArr = JSON.parse(xmlhttp.responseText);
myFunction(myArr);
}
}
xmlhttp.send();

var out = "";
var i;
out += '<a href="' + arr[i].url + '">' + arr[i].display +
'</a><br>';
}
}

myFunction([
{
},
{
},
{
}
]);

myFunction([
{
},
{
},
{
"url": "http://www.w3schools.com/css/default.asp""
}
]);

<!DOCTYPE html>
<html>
<body>
<h1>Customers</h1>
<script>
var url = "http://www.w3schools.com/website/customers_mysql.php";
xmlhttp.onreadystatechange=function() {
myFunction(xmlhttp.responseText);
}
}
xmlhttp.send();
function myFunction(response) {
var arr = JSON.parse(response);
var i;
var out = "<table>";
out += "<tr><td>" +
arr[i].Name +
"</td><td>" +
arr[i].City +
"</td><td>" +
arr[i].Country +
"</td></tr>";
}
out += "</table>"
}
</script>
</body>
</html>

<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");
$conn = new mysqli("myServer", "myUser", "myPassword", "Northwind");
$result = $conn->query("SELECT CompanyName, City, Country FROM Customers");
$outp = "[";
while($rs = $result->fetch_array(MYSQLI_ASSOC)) {
if ($outp != "[") {$outp .= ",";}
$outp .= '{"Name":"' . $rs["CompanyName"] . '",';
$outp .= '"City":"' . $rs["City"] . '",';
$outp .= '"Country":"'. $rs["Country"] . '"}';
}
$outp .="]";
$conn->close();
echo($outp);
?>

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
border-bottom:3px solid #cc9900;
color: #996600;
font-size: 30px;
}
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd){
background-color: #f1f1f1;
}
table tr:nth-child(even){
background-color: #ffffff;
}
</style>
</head>
<body>
<h1>Customers</h1>
<script>
var url = "http://www.w3schools.com/website/customers_mysql.php";
xmlhttp.onreadystatechange=function(){
myFunction(xmlhttp.responseText);
}
}
xmlhttp.open("GET",url, true);
xmlhttp.send();
function myFunction(response) {
var arr = JSON.parse(response);
var i;
var out = "<table>";
out += "<tr><td>"+
arr[i].Name+
"</td><td>"+
arr[i].City+
"</td><td>"+
arr[i].Country+
"</td></tr>";
}
out += "</table>"
}
</script>
</body>
</html>

JSON(JavaScript Object Notation)

Recommended

More Related Content

What's hot (20)

Viewers also liked (6)

Similar to JSON(JavaScript Object Notation) (20)

More from Raghu nath (20)

Recently uploaded (20)

JSON(JavaScript Object Notation)