JSON Syntax is similar to JavaScript Objects

JSON Syntax

As JSON (JavaScript Object Notation) is derived from JavaScript its Syntax is similar to JavaScript Objects.

JSON:

JSON Object is an unordered set of name/value pairs.
Object names are followed by a colon (:).
Curly braces {} are used to hold objects. Object begins with { (left curly brace) and ends with } (right curly brace).
JSON Object data is represented as a collection of name/value pair.
Each name/value pairs are separated by comma (,)
Square braces [] are used to hold Arrays.

Example :
Below is the simplest form of JSON Object called movie having Object name/value pair data as name, release, genre, director and writer and vaules “Avatar”,2009,”Fantacy”,”James Cameron”,”James Cameron” respectively.

{
 "movie": 
 {
 "name"    :"Avatar",
 "release" : 2009,
 "genre"   :"Fantasy",
 "director":"James Cameron",
 "writer"  :"James Cameron"
 }
}

Below is an Example of a JSON Array Object called movies with the same keys as above. We have 3 elements in the arrays.

Each name-value pair is seperated by semi colon. Each object is enclosed with curly braces.

Note that each object is seperated by comma too.

These array object are stored within square braces.

{
 "movies": 
 [
 {
 "name":"Avatar",
 "release": "2009",
 "genre": "Fantasy",
 "director": "James Cameron",
 "writer":"James Cameron"
 },
 {
 "name":"Hobbit",
 "release": "2012",
 "genre": "Adventure",
 "director": "Peter Jackson",
 "writer":"Fran Walsh"
 },
 {
 "name":"Interstellar",
 "release": "2014",
 "genre": "Adventure",
 "director": "Christopher Nolan",
 "writer":"Jonathan Nolan"
 }
]
}

If you come from XML background, then the below example will help you understand the JSON structure more easily. It is a XML representation of the above JSON Object. movies is note of the xml element containg subtags name, release, genrem director and writer.

Above JSON representation in XML format :

<?xml version="1.0" encoding="UTF-8" ?>
  <movies>
    <name>Avatar</name>
    <release>2009</release>
    <genre>Fantasy</genre>
    <director>James Cameron</director>
    <writer>James Cameron</writer>
  </movies>
  <movies>
    <name>Hobbit</name>
    <release>2012</release>
    <genre>Adventure</genre>
    <director>Peter Jackson</director>
    <writer>Fran Walsh</writer>
  </movies>
  <movies>
    <name>Interstellar</name>
    <release>2014</release>
    <genre>Adventure</genre>
    <director>Christopher Nolan</director>
    <writer>Jonathan Nolan</writer>
</movies>

Example :

 Songs = [

  { "SongName":"Imagine" , "ArtistName":"John Lennon" }, 
  { "SongName":"Voodoo child" , "ArtistName":"Jimi Hendrix" }, 
  { "SongName":"Stairway to heaven" , "ArtistName": "Led Zeppelin" },
  { "SongName":"Kashmir" , "ArtistName": "Led Zeppelin" }
    
 ];

In the above example, Songs is an JSON Array object holding 4 object’s with songName and ArtistName details.

Data structures suppored by JSON

Collection of name/value pairs.
Ordered List : Eg. Arrays, Vectors, List, Sequence etc.

JSON Example with JavaScript

Example 1 : Simple Object

Now lets see how we can use JSON in an HTML file,in this example we have a mySong JSON Object with 4 name/value pairs.

We can access the names of the JSON object by

ObjectName.keyName

(e.g. mySong.SongName)

<html>
<head>
  <script type="text/javascript">

  function jsonExample() {
  
  //mySong JSON Object
    var mySong= {
        "SongName":"Imagine",
		"ArtistName":"John Lennon", 
		"AlbumName":"Imagine",
		"Year":1971
	};
    
    
 document.getElementById("SongName").innerHTML = mySong.SongName; 
 document.getElementById("ArtistName").innerHTML = mySong.ArtistName;
 document.getElementById("AlbumName").innerHTML = mySong.AlbumName;
 document.getElementById("Year").innerHTML = mySong.Year;
}
  </script>
</head>

<body onload="jsonExample();">

  Song   : <span id="SongName"><br> 
  Artist : <span id="ArtistName"><br> 
  Album  : <span id="AlbumName"><br> 
  Year   : <span id="Year"><br> 

</body>
</html>

Output

	
Song : Imagine
Artist : John Lennon
Album : Imagine
Year : 1971

Example 2 : Simple Object with Arrays

In the below example, we have a mySongs JSON Object with two array objects having 4 name/value pair

We can access the names of the JSON object with arrays by ObjectName[index].keyName (e.g. mySongs[0].SongName).

<html>
<head>
  <script type="text/javascript">

  function jsonExample() {
  
  //mySongs JSON Object with Array
    var mySongs=  [
		{"SongName":"Imagine",
		"ArtistName":"John Lennon", 
	    "AlbumName":"Imagine",
	    "Year":1971},
	          		
	     {"SongName":"Stairway to Heaven",
	     "ArtistName":"Led Zeppelin", 
	      "AlbumName":"Led Zeppelin IV",
	      "Year":1971}
	   ];
	   
    	 var data ="";
    	 
    	 data = data + "Song : " + mySongs[0].SongName + " <br>";
    	 data =data + "Artist : " + mySongs[0].ArtistName + " <br>";
    	 data = data + "Album : " + mySongs[0].AlbumName + " <br>";
    	 data =data + "Year : " + mySongs[0].Year + " <br> <br> <br>";
    	 
    	 data = data + "Song : " + mySongs[1].SongName + " <br>";
    	 data =data + "Artist : " + mySongs[1].ArtistName + " <br>";
    	 data = data + "Album : " + mySongs[1].AlbumName + " <br>";
    	 data =data + "Year : " + mySongs[1].Year + " <br>";
		
	 document.getElementById("mySongs").innerHTML = data;
   }
  </script>
</head>

<body onload="jsonExample();">

<div id="mySongs">
</div>

</body>
</html>

Output

	
Song : Imagine
Artist : John Lennon
Album : Imagine
Year : 1971


Song : Stairway to Heaven
Artist : Led Zeppelin
Album : Led Zeppelin IV
Year : 1971

Example 3 : JSON array Example

The below example is just the same as the one we saw above. Here we have a JSON Object with three array objects containing students details like their names and subjects they study.

<html>
<head>
  <script type="text/javascript">

  function jsonExample() {
  
  //JSON Array Object of Students


    var students =  [
      {"StudentName":"Chris",
      "Subject1":"English", 
      "Subject2":"French",
      "Subject3":"Algebra",
      "Subject4":"Chemistry",
      "Subject5":"Physics",
      "Subject6":"Biology" },
	          		  
      {"StudentName":"Clara",
      "Subject1":"English", 
      "Subject2":"German",
      "Subject3":"Algebra",
      "Subject4":"Geography",
      "Subject5":"Social Studies",
      "Subject6":"Biology"},
      
      
      {"StudentName":"James",
       "Subject1":"Korean", 
      "Subject2":"French",
      "Subject3":"Algebra",
      "Subject4":"Geography",
      "Subject5":"Social Studies",
      "Subject6":"Biology"}
      
	   ];


       //Parsing JSON Object and displaying on web browser.
	   
    	 var jsonData ="";
    	 
   jsonData = jsonData + "Student Name : " + students[0].StudentName + " <br>";
   jsonData =jsonData + "Subject 1 : " + students[0].Subject1 + " <br>";
   jsonData = jsonData + "Subject 2 : " + students[0].Subject2 + " <br>";
   jsonData = jsonData + "Subject 3 : " + students[0].Subject3 + " <br>";
   jsonData = jsonData + "Subject 4 : " + students[0].Subject4 + " <br>";
   sonData = jsonData + "Subject 5 : " + students[0].Subject5 + " <br>";
   jsonData =jsonData + "Subject 6 : " + students[0].Subject6 + " <br> <br> <br>";
    	 
   jsonData = jsonData + "Student Name : " + students[1].StudentName + " <br>";
   jsonData =jsonData + "Subject 1 : " + students[1].Subject1 + " <br>";
   jsonData = jsonData + "Subject 2 : " + students[1].Subject2 + " <br>";
   jsonData = jsonData + "Subject 3 : " + students[1].Subject3 + " <br>";
   jsonData = jsonData + "Subject 4 : " + students[1].Subject4 + " <br>";
   jsonData = jsonData + "Subject 5 : " + students[1].Subject5 + " <br>";
   jsonData =jsonData + "Subject 6 : " + students[1].Subject6 + " <br> <br> <br>";
   
   
   jsonData = jsonData + "Student Name : " + students[2].StudentName + " <br>";
   jsonData =jsonData + "Subject 1 : " + students[2].Subject1 + " <br>";
   jsonData = jsonData + "Subject 2 : " + students[2].Subject2 + " <br>";
   jsonData = jsonData + "Subject 3 : " + students[2].Subject3 + " <br>";
   jsonData = jsonData + "Subject 4 : " + students[2].Subject4 + " <br>";
   jsonData = jsonData + "Subject 5 : " + students[2].Subject5 + " <br>";
   jsonData =jsonData + "Subject 6 : " + students[2].Subject6 + " <br> <br> <br>";
   
		

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


<!-- Displaying the Student JSON Object onload of the page. -->
<body onload="jsonExample();">

<div id="students">
</div>

</body>
</html>

Output

Student Name : Chris
Subject 1 : English Subject 
2 : French Subject 
3 : Algebra Subject 
4 : Chemistry Subject 
5 : Physics Subject 
6 : Biology Student 

Name : Clara Subject 
1 : English Subject 
2 : German Subject 
3 : Algebra Subject
4 : Geography Subject 
5 : Social Studies Subject 
6 : Biology Student 

Name : James Subject 
1 : Korean Subject 
2 : French Subject 
3 : Algebra Subject 
4 : Geography Subject 
5 : Social Studies Subject 
6 : Biology

Continue to the next part JSON Datatypes