JavaScript

Data Types in JSON

Introduction

 
JSON (JavaScript Object Notation) is an open and text-based data exchange format. In other words, it is a text format for the serialization of structured data. It is derived from object literals of JavaScript.
  

JSON represents six data types

 
1. Primitive Types
  • String
  • Number
  • Boolean
  • Null
2. Structure Type
  • Object
  • Array
JSON-represents-six-data-types.jpg
 

JSON Data Type

  • String: It begins and ends with double-quote marks and contains Unicode characters in a sequence. Any character may be escaped.
  • Number: A number can be an integer, real number, decimal point, with exponent part and prefix minus sign but it does not contain hex and octal forms.
  • Boolean: It contains true or false.
  • Null: empty

Array

  • It represents an ordered sequence of values.
  • It is enclosed in square bracts.
  • Each value is separated by a comma.
  • Array values can be any valid data type.
  • Data is retrieved from the array by an index.
  • An Array can contain an Object.

Object

  • It is an unordered collection in name/value pairs.
  • Each pair is enclosed in curly brackets.
  • A Name/Value is separated by a colon (":").
  • A Name is defined in double-quotes and can contain Unicode characters.
  • A value can't be a function.
  • Values can be any data type.
  • Object values can be retrieved using the. an operator with the name.
  • We use an eval() JavaScript function to convert JSON text into a JSON object.
Example
  1.    
  2. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JSONArray.aspx.cs" Inherits="JqueryValidation.JSONArray" %>  
  3.    
  4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  5.    
  6. <html xmlns="http://www.w3.org/1999/xhtml">  
  7. <head runat="server">  
  8.     <title></title>  
  9.     <style type="text/css">  
  10.     .border  
  11.     {  
  12.         border:1px solid #000;  
  13.     }  
  14.     </style>   
  15.     <script type="text/javascript">  
  16.     //create an Array which contains type and phoneNumber  
  17.         var phoneNumber = [{  
  18.             "type": "Home",  
  19.             "number": 919461162949  
  20.         },  
  21.         {  
  22.             "type": "Office",  
  23.             "number": "123456789"  
  24.      }]  
  25.    
  26.      function getPhoneInfo()  
  27.      {  
  28.          var displayDiv = document.getElementById("displayDiv");  
  29.          var detailTable = document.createElement("table");  
  30.          detailTable.setAttribute("class", "border");  
  31.    
  32.          var thType = document.createElement("th");  
  33.          thType.setAttribute("class", "border");  
  34.          thType.appendChild(document.createTextNode("Type"));  
  35.          detailTable.appendChild(thType);  
  36.    
  37.          var thNumber = document.createElement("th");  
  38.          thNumber.setAttribute("class", "border");  
  39.          thNumber.appendChild(document.createTextNode("Number"));  
  40.          detailTable.appendChild(thNumber);   
  41.    
  42.          for (var i = 0; i < phoneNumber.length; i++)  
  43.          {  
  44.              var row = document.createElement("tr");  
  45.                            
  46.              var colType = document.createElement("td");  
  47.              colType.setAttribute("class", "border");  
  48.    
  49.              var colNumber = document.createElement("td");  
  50.              colNumber.setAttribute("class", "border");  
  51.    
  52.              //Read data from Array  
  53.              colType.appendChild(document.createTextNode(phoneNumber[i].type));  
  54.              colNumber.appendChild(document.createTextNode(phoneNumber[i].number));  
  55.    
  56.              row.appendChild(colType);  
  57.              row.appendChild(colNumber);  
  58.              detailTable.appendChild(row);  
  59.         }  
  60.       displayDiv.appendChild(detailTable);  
  61.      }  
  62.     </script>  
  63. </head>  
  64. <body onload="getPhoneInfo()">  
  65.     <form id="form1" runat="server">  
  66.     <div id="displayDiv">     
  67.     </div>  
  68.     </form>  
  69. </body>  
  70. </html> 
OUTPUT
 
OUTPUT-JSON.jpg

Up Next
    Ebook Download
    View all
    Learn
    View all
    Membership not found