JSON Syntax : JSON Tutorial

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

JSON Syntax

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 separated by a semicolon and each object is enclosed with curly braces, note that each object is separated by comma too. These array objects 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 an XML background, then the below example will help you understand the JSON structure more easily. It is an 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>

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>

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

More Posts related to Json-Tutorial,

More Posts: