[go: up one dir, main page]
Scribd
Upload
262 views21 pages

Presentation1 JSON

JSON is a lightweight data-interchange format that is easy for humans to read and write and for machines to parse and generate. It is built on two structures: a collection of name/value pairs and an ordered list of values. JSON uses JavaScript syntax but is language-independent. It allows structured data to be shared between web applications. JSON data can be parsed into a JavaScript object to be accessed and manipulated.

Uploaded by

Janicealmine Sandeepsharma
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
262 views21 pages

Presentation1 JSON

JSON is a lightweight data-interchange format that is easy for humans to read and write and for machines to parse and generate. It is built on two structures: a collection of name/value pairs and an ordered list of values. JSON uses JavaScript syntax but is language-independent. It allows structured data to be shared between web applications. JSON data can be parsed into a JavaScript object to be accessed and manipulated.

Uploaded by

Janicealmine Sandeepsharma
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 21

JSON

JavaScriptObjectNotation

What is JSON ?
JSON is a syntax for storing and exchanging
data.
JSON is an easier-to-use alternative to XML.
JSON is a lightweight data-interchange
format.
JSON is language independent*.
JSON is "self-describing" and easy to
understand.
JSON uses JavaScript syntax, but the JSON format is text only, just
like XML.
(Text can be read and used as a data format by any programming
language.)

The following JSON example defines an employees object, with an


array of 3 employee records:

{"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>

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.Ex.
<!DOCTYPEhtml>
<html>
<body>
<h2>JSON Object Creation in JavaScript</h2>
<pid="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>

Much Like XML Because

Both JSON and XML is "self describing" (human readable)

Both JSON and XML is hierarchical (values within values)

Both JSON and XML can be parsed and used by lots of programming
languages

Both JSON and XML can be fetched with an XMLHttpRequest

Much Unlike XML Because

JSON doesn't use end tag

JSON is shorter

JSON is quicker to read and write

JSON can use arrays

The biggest difference is: XML has to be parsed with an XML parser, JSON
can be parsed by a standard JavaScript function.

JSON Introduction

Why JSON?
For AJAX applications, JSON is faster and easier than XML:
Using XML

Fetch an XML document

Use the XML DOM to loop through the document

Extract values and store in variables

Using JSON

Fetch a JSON string

JSON.Parse the JSON string

JSONSyntax
The JSON syntax is a subset of the
JavaScript syntax.

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:

Example
"firstName":"John
Note:

JSON names require double quotes. JavaScript names don't.

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 braces)
null

JSON Objects
JSON objects are written inside curly braces.
Just like JavaScript, JSON objects can
contain multiple name/values pairs:
Example:
{"firstName":"John","lastName":"Doe"}

JSON Arrays
JSON arrays are written inside square brackets.
Just like JavaScript, a JSON array can contain
multiple objects:
Example:
"employees":[
{"firstName":"John","lastName":"Doe"},
{"firstName":"Anna","lastName":"Smith"},
{"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:
Example
var employees = [
{"firstName":"John","lastName":"Doe"},
{"firstName":"Anna","lastName":"Smith"},
{"firstName":"Peter","lastName":"Jones"}
];
The first entry in the JavaScript object array can be accessed like this:
Example
// returns John Doe
employees[0].firstName +" "+ employees[0].lastName;

It can also be accessed like this:


Example
// returns John Doe
employees[0]["firstName"] +" "+ employees[0]["lastName"];
Data can be modified like this:
Example
employees[0].firstName ="Gilbert";
It can also be modified like this:
Example
employees[0]["firstName"] ="Gilbert";
In the next chapter you will learn how to convert a JSON text to a
JavaScript object.

JSON Files
The file type for JSON files is ".json"
The MIME type for JSON text is
"application/json"

JSONHow To
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

JSON Example - Object From String

of a file).

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:
varobj = JSON.parse(text);

Use the new JavaScript object in your page:


Example
<pid="demo"></p>
<script>
document.getElementById("demo").innerHTML =
obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script>
<!DOCTYPE html>
<html>
<body>
<h2>Create Object from JSON String</h2>
<p id="demo"></p>
<script>
var text = '{"employees":[' +
'{"firstName":"John","lastName":"Doe" },' +
'{"firstName":"Anna","lastName":"Smith" },' +
'{"firstName":"Peter","lastName":"Jones" }]}';
obj = JSON.parse(text);
document.getElementById("demo").innerHTML =
obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script>
</body>
</html>

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:
Example
varobj = eval ("("+ text +")");
<!DOCTYPE html>
<html>
<body>
<h2>Create Object from JSON String</h2>
<p id="demo"></p>
<script>
var txt = '{"employees":[' +
'{"firstName":"John","lastName":"Doe" },' +
'{"firstName":"Anna","lastName":"Smith" },' +
'{"firstName":"Peter","lastName":"Jones" }]}';
var obj = eval ("(" + txt + ")");
document.getElementById("demo").innerHTML =
obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script>
</body>

JSONHttp Request
A common use of JSON is to
read data from a web server,
and display the data in a web
page.

This example reads a menu frommyTutorials.txt,


and displays the menu in a web page:
<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>
</body>
</html>

You might also like