Introduction to JSON

This article is about the basics of JavaScript Object Notation (JSON). The following describes JSON:

  • light weight text data interchange format
  • language independent
  • easy to understand
  • self describing

Description

JSON is nothing but a lightweight text data interchange format, that is widely used for describing data. It is easily converted to most programming languages for use in many APIs such as:

  • Flicker
  • Twitter
  • Instagram
  • Photobucket
  • Google Geocoder
  • Tumblr
  • Yahoo Travel
  • Yahoo Answers
  • Yelp

And so on, now offers their result in this format.

It’s a way of annotating data that’s relatively easy for programmers to perform operations like read and write. This helps explain the current context of the use of JSON. It works similarly to Asynchronous JavaScript and XML (AJAX), that generally depends upon the concepts of JavaScript.

Programmers have searched for an easy way to transfer data. Converting JSON to something usable in JavaScript takes one line of code and automatically works in all types of web browsers.

JSON Objects

Creation of objects in JSON is done between a pair of curly brackets. Objects in JSON can have multiple values in this scenario too.

Example

Single pair value in JSON

{ firstname”:“abhishek ,lastname”:”jaiswal”},

Multiple pair value in JSON

{ firstname”:“abhishek ,lastname”:”jaiswal”},
{ firstname”:“a1” ,lastname”:”j1”},
{ firstname”:“a2” ,lastname”:”j2”},
{ firstname”:“a3” ,lastname”:”j3”},

JSON Array

Just as in other programming languages JSON also uses square [] brackets for representing an array.

Moreover an array can have multiple objects.

Example

{“student:[{ firstname”:“abhishek ,lastname”:”jaiswal”},
{ firstname”:“a1” ,lastname”:”j1”},
{ firstname”:“a2” ,lastname”:”j2”},
{ firstname”:“a3” ,lastname”:”j3”},]}

The preceding example shows basic structure if the JSON.

Why JSON?

There are several technologies like JSON, one of the most famous and used among those languages is XML. But there are several differences that create hurdles between JSON and XML. These hurdles provide these functionalities to JSON, that are not present in XML. Some of these features of JSON are as follows:

  • There are no ending Tags in JSON.
  • No reverse word concept in JSON
  • JSON uses functionality of ARRAYS
  • Ease of read and write operations
  • Easily works with JavaScript
  • can be used in enhancing functionalities of AJAX
  • is shorter
  • can be parsed using JavaScript

JSON vs XML

  • JSON performs read and write operations much more easily than XML
  • JSON can be used in AJAX apps in place of XML
  • JSON works more effectively than XML
  • Enhanced features than XML

JSON Parser

For parsing in JSON we use the eval() function. This function can compile and execute any JavaScript code. It is comparatively safer to use the JSON parser to convert JSON text to a JavaScript object. A JSON parser will recognize only JSON text written in the code and its not going to compile script at all.

Some other features of JSON parser are

  • It is faster
  • It's more convenient
  • Reduces complexities

Referenced Example

  1. <html>  
  2. <head>  
  3.     <title>Record</title>  
  4. </head>  
  5. <body>  
  6.     <h1>Basics of JSON </h1>  
  7.     <p>  
  8.         Name <span id="”jName”"></span>  
  9.         <br />  
  10.         Roll_No <span id="”jRoll_No”"></span>  
  11.         <br />  
  12.         ID <span id="”jID”"></span>  
  13.         <br />  
  14.         DOB <span id="”jDOB”"></span>  
  15.         <br />  
  16.     </p>  
  17.     <script>  
  18.         var JSONobject= {  
  19.             “Name” : “abhishek”,  
  20.             “Roll_No” : 123,  
  21.             “ID” : “CSE”,  
  22.             “DOB” : “JAN 01”,  
  23.             );  
  24.         document.getElementById  
  25.         (“jName)inner.HTML=JSONobject.Name  
  26.   
  27.         document.getElementById  
  28.         (“jRoll_No”)inner.HTML=JSONobject. jRoll_No  
  29.   
  30.         document.getElementById  
  31.         (“jID)inner.HTML=JSONobject.ID  
  32.   
  33.         document.getElementById  
  34.         (“jDOB)inner.HTML=JSONobject.DOB  
  35.     </script>  
  36. </body>  
  37. </html>  

Output

json

Up Next
    Ebook Download
    View all
    Learn
    View all