JSON Datatypes : Tutorial



In the previous tutorial we have seem that JSON supports two kind of Data Structures.

1. Collection of name/value pairs
2. Ordered list of values : i.e array , vector, list etc.


JSON name/value pairs can hold data of various kinds e.g. Strings, integer, Decimals etc.



Lets see what datatypes JSON supports for key/value pairs :

JSON supports 6 datatypes,

Primitive Datatypes :



Primitive datatypes are as the basic building block of any programming language. These datatypes mostly have one-to-one correspondence with the objects in memory.

There are 4 Primitive datatypes that we have in JSON,

    1. Strings
    2. Number
    3. Boolean
    4. null


Structured datatypes also known as aggregate data types. They are collection of other datatypes. As they are defined by the user they are also called as user defiled data types.

Structure Datatypes :

    5. Array
    6. Object





1. Strings

    - Strings are sequence of Unicode characters surrounded by double quotes : e.g. "This is a string"
    - double quotes within a string can be escaped by a back-slash /
    - Note that if the strings are not encloded properly within double quotes the html file may throw error messages like "Uncaught SyntaxError: Unexpected token ILLEGAL"

Example :

var stringExample=  
	{"SongName":"Imagine",
	 "ArtistName":"John Lennon", 
	"AlbumName":"\""Imagine\""};


<html>
<head>
<title>JSON String Datatype Example</title>
  <script type="text/javascript">

  function jsonExample() {

  var stringExample = [{ "SongName":"Imagine",
    "ArtistName":"John Lennon", 
    "AlbumName":"\"Imagine\""}];

    	 var jsonData ="";
    	 
 jsonData = jsonData + "Song Name : " + stringExample[0].SongName + " <br>";
 jsonData = jsonData + "Artist Name  : " + stringExample[0].ArtistName + " <br>";
 jsonData = jsonData + "Album Name : " + stringExample[0].AlbumName + " <br><br>";
    
 document.getElementById("data").innerHTML = jsonData;
   }
  </script>
</head>


<body onload="jsonExample();">

<div id="data">
</div>

</body>
</html>	
Output

Song Name : Imagine Artist Name : John Lennon Album Name : "Imagine"


2. Number

    - Number datatype can be integer, real number, floating points : e.g. 22
    - Numbers can be positive, negative or exponential. e.g. -3.2e3 /
    - JSON does not support Octol or Hexadecimal numbers.

Example :

var NumberExample=  
	{"Date":11,
	 "Temp":-3, 
	 "Speed": 3e10}; 


<html>
<head>
<title>JSON Number Datatype Example</title>
  <script type="text/javascript">

  function jsonExample() {

  var BooleanExample=  [
 {"Date":11,
 "Temp":-3, 
 "Speed": 3e10}];

 var jsonData ="";

jsonData = jsonData + "Date : " + NumberExample[0].Date + " <br>";
jsonData = jsonData + "Temperature  : " + NumberExample[0].Temp + " <br>";
jsonData = jsonData + "Speed : " + NumberExample[0].Speed + " <br><br>";
	
 document.getElementById("data").innerHTML = jsonData;
   }
  </script>
</head>


<body onload="jsonExample();">

<div id="data">
</div>

</body>
</html>
Output

Date : 11 Temperature : -3 Speed : 30000000000


3. Boolean

    - Boolean can have only two values True or False.

Example :

var NumberExample=  
	{"flag": true,
	 "result":false}; 


<html>
<head>
<title>JSON Boolean Datatype Example</title>
  <script type="text/javascript">

  function jsonBooleanExample() {

  var BooleanJsonExample =  [
  {"flag": true,
   "result":false} ];

 var jsonData ="";

jsonData = jsonData + "Flag Value : " + BooleanJsonExample[0].flag + " <br>";
jsonData = jsonData + "Result   : " + BooleanJsonExample[0].result + " <br><br>";

	
 document.getElementById("data").innerHTML = jsonData;
   }
  </script>
</head>


<body onload="BooleanJsonExample();">

<div id="data">
</div>

</body>
</html>
Output

Flag Value : true Result : false




4. Null

    - null represents empty value
    - null is a special datatype in JSON that can be set to any datatype i.e strings, number, arrays, objects and booleans too.

Example :

var NullJsonExample=  
	{"data": null,
	 "result":null}; 


	
<html>
<head>
<title>JSON Null Datatype Example</title>
  <script type="text/javascript">

  function jsonNullExample() {

 
  var NullJsonExample = [
  {"data": null,
   "result":null} ];

 var jsonData ="";

jsonData = jsonData + "Data : " + NullJsonExample[0].data + " <br>";
jsonData = jsonData + "result   : " + NullJsonExample[0].result + " <br><br>";

	
 document.getElementById("data").innerHTML = jsonData;
   }
  </script>
</head>


<body onload="jsonNullExample();">

<div id="data">
</div>

</body>
</html>
Output

Data : null result : null






5. Array

    - Arrays in JSON are Structured datatypes.
    - Arrays in JSON are unordered collections of name/value pairs.
    - Name & value pair are separated by a colon :
    - Each pair starts with a { (left curly brace) and ends with a } (right curly brace).
    - Two pairs are separated by a colon (,).
    - Names are surrounded by double-quotes and are Unicode characters.
    - Two Names(keys) should not have a same name.
    - The value can be of any datatype, but not functions.
    - JavaScript eval() is used to convert JSON text to an JSON Object.

Example:

var ArrayExample=  [

	{"SongName":"Imagine",
	 "ArtistName":"John Lennon", 
	 "AlbumName":"Imagine",
	 "Year":1971},
	          		
	{"SongName":"Stairway to Heaven",
	 "ArtistName":"Led Zeppelin", 
	 "AlbumName":"Led Zeppelin IV",
	 "Year":1971}
];


6. Object

    - Objects in JSON are unordered collection of name/value pairs.
    - Name and the value are seperated by colon :
    - Two Name/value pairs are enclosed with {} curly braces.
    - Names are enclosed with double-quotes and contains Unicode characters.
    - Values can hold any values, but no functions.
    - Objects can be retrieved using dot operator followed by name.
    - JavaScript eval() is used to convert JSON text to an JSON Object.

Example:

var ObjectExample= 
	["jsonObject" : {"SongName":"Imagine",
	 "ArtistName":"John Lennon", 
	 "AlbumName":"Imagine",
	 "Year":1971}];


JSON values can be of type number, string , boolean, array, object and null.
We can include Whitespaces with-in values.