JSON Datatypes : Tutorial

In the previous tutorial we have seen that JSON supports two kinds of Data Structures.

1. Collection of name/value pairs

2. An 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 a 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 a 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.

More Posts related to Json-Tutorial,

More Posts: