Concepts of JSON in JavaScript

<script>  
alert('Hey, I am sure you know what this line can do.');  
</script>  

Do you know that JavaScript has concept of classes same like OOP? Let us create 'Employee' class in JavaScript.

 <script>  
 //So, here we have Employee class  
 var Employee = function(){  
        
      //And this is a 'test' method of the class  
      this.test = function(){  
           alert('This is a test function');  
      }       
 }  
   
 //Let us create object of Employee class  
 var objJohn = new Employee();  
   
 //and call 'test' method  
 objJohn.test();  
 </script>  

Result:

 

Wow! JavaScript sure has classes and methods. Let us explore properties and scope of it

 <script>  
 //So, here we have Employee class  
 var Employee = function(){  
   
      //This is a public property  
      this.firstName = 'John';  
        
      //and this one is a private property  
      var lastName = 'Fernando';  
 }  
   
 //Lets create an object of Employee class  
 var objJohn = new Employee();  
   
 //This will sure alert 'John'  
 alert(objJohn.firstName);  
   
 //But this will alert undefined because 'var' define its scope as private (within the class).  
 alert(objJohn.lastName);  
   
 </script>  

Result:

At this point our basic concepts are clear where as JavaScript class has also Constructor, Inheritance, Abstraction and so on...

Now let us explore JSON with the help of JavaScript object.

Suppose we have a 'Cake' class:

 <script>  
 var Cake = function(){  
      this.flavour = 'chocolate';  
 }  
 var cakeForJohn = new Cake();  
   
 //This will alert a msg 'chocolate'  
 alert(cakeForJohn.flavour);  
   
   
 //NOW, what if I rewrite the above class into a different format:  
 var cakeForJohn = {  
      flavour : 'chocolate'  
 }  
   
 //This also alert a msg 'chocolate'  
 alert(cakeForJohn.flavour);  
 </script>  

Oh man! a minor difference in syntax but result is same. This is called JSON syntax. Let us compare these two syntax.

 

Another example of JSON where we are using Array.

 <script>  
 var box = { 'cakes' :  
      [  
           {'flavour' : 'Chocolate', 'size': 'Large'},  
           {'flavour' : 'Vanilla', 'size': 'Small'}  
      ]  
 }  
   
 //box.cakes will give us the array  
 var cakes = box.cakes;  
   
 //iterate each array  
 for(i = 0 ; i<cakes.length; i++)  
      alert(cakes[i].flavour + ' - ' + cakes[i].size);  
        
 /*  
 This above script will alert:  
 Chocolate - Large  
 Vanilla - Small  
 */  
 </script>  

JSON (JavaScript Object Notation) is lightweight text-data interchange format same like XML. JSON is language independent and many languages provide parser of JSON.

Use Case:
Suppose we need to show records of employees in HTML table. So from the JavaScript we can send request to server and ask for employee records in JSON format. Parse the JSON at client side then iterate the records and create the HTML table with the help of JavaScript loop.

I hope that your concepts are clear. Now you can easily explore the depth of JSON from the available internet tutorials.