Home > DeveloperSection > Articles > Introduction to JavaScript Object Notation (JSON)

Introduction to JavaScript Object Notation (JSON)


JSON JSON 
Ratings:
0 Comment(s)
 5341  View(s)
Rate this:

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.

Introduction to JavaScript Object Notation (JSON)


Don't want to miss updates? Please click the below button!

Follow MindStick