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.

Advertisements
Try Out Code2care Dev Tools:

Advertisements



Android Java Linux Microsoft Google Python macOS Notepad++ Microsoft Teams CSS PHP SharePoint Html Linux C Programs Bootstrap jQuery Sublime Android Studio Facebook Eclipse WhatsApp News MySQL Json HowTos JavaScript FTP S3


Advertisements


Code2care is an initiative to publish and share varied knowledge in programming and technical areas gathered during day-to-day learnings and development activities.

Students and Software Developers can leverage this portal to find solutions to their various queries without re-inventing the wheel by referring to our easy to understand posts. Technical posts might include Learnings, Tutorials, Trouble-Shooting steps, Video Tutorials, Code Snippets, How Tos, Blogs, Articles, etc.
🎉 We are celebrating the 10th years of Code2care! Thank you for all your support! We hope we made a difference.
We strong support Gender Equality & Diversity.

We stand in solidarity with Ukraine - Make a donation to UNHCR - https://donate.unhcr.org/in/en-in/ukraine-emergency