Introduction to JavaScript Object Notation (JSON)
Introduction:
JSON is smaller than XML, and faster and easier to parse. JSON (an acronym for
JavaScript Object Notation) is a lightweight text-based open standard designed
for human-readable data interchange. It is derived from the JavaScript
programming language for representing simple data structures and associative
arrays, called objects. JSON is syntax for storing and exchanging text
information.
JSON is a text format that is completely language independent but uses
conventions that are familiar to programmers of the C-family of languages,
including C, C++, C#, Java, JavaScript, Perl, Python, and many others. These
properties make JSON an ideal data-interchange language.
JSON is built on two structures:
·
A collection of name/value pairs. In various
languages, this is realized as an object, record, struct, dictionary, hash
table, keyed list, or associative array.
·
An ordered list of values. In most languages,
this is realized as an array, vector, list, or sequence.
JSON is not only a syndication format (e.g. an alternative to XML); it is a
language-independent data interchange format.
History of JSON:
The name behind popularizing the JSON is
Douglas Crockford. He used JSON is his company State Software around 2001.
In 2005, Yahoo started using JSON in its web services. In later 2006, Google
started offering JSON in its GData Web
Protocol. Today, JSON is one of the most widely used data-interchange format
in web, and supported by most of the Web APIs (like Twitter API) to fetch public
data and creating applications out of them.
Usage of JSON:
Various Web Services and APIs use JSON format to provide public data. Using the
associated Service / API, you can fetch that data and use it to create
applications.
Comparison with XML:
Since both JSON and XML are mean to be a
data interchange format, there is always a comparison between
JSON (JavaScript Object Notation) and
XML (EXtensible Markup Language).
Similarities with XML:
·
Both (JSON and XML) are plain text.
·
Both are ‘self describing’ (human readable).
·
Both can be transported using AJAX.
·
Both can be parsed using JavaScript.
·
Both can be used with modern programming
language.
Dissimilarities with XML:
·
JSON is much quicker to read and write in
comparison to XML
·
In JSON text can be parsed using JavaScript
inbuilt function eval().
·
JSON supports data structures(name/value pairs
and ordered list of values
·
XML is redundant in nature unlike JSON.
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
·
eval()
the JSON string
JSON Syntax Rule:
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 (:), and followed by a value:
Syntax:
"firstName" : "Arun Kumar Singh"
Here ‘firstName’ is JSON variable
name and ‘Arun Kumar Singh’ is JSON
value.
JSON Values:
A JSON values can be:
·
A number(integer and floating point)
·
A String (in double quotes)
·
A Boolean (true or false)
·
An Array (in square brackets)
·
An objects(in curly braces)
Let’s see an example on how to create JSON object with JavaScript.
Example:
In this example, simply I have created JSON object and store some values after
then set these values into proper names.
|
<html>
<head>
<title>JSON Object Creation Demo</title>
</head>
<body>
<h2>JSON Object Creation 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">
// Create JSON object using JavaScript
var
JsonObject= {
// Assign values in
JSON variable names.
"name": "Arun
Kumar Singh",
"street":
"Kothapaarcha",
"age": 22,
"phone": "000 1234567"
};
// Set the values in html tags.
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>
|
Output:
Save the above code in html format and execute in with web browser.
|