This workshop is for you, if:

• You are looking for a data structure to store your data for easy javascript access
• You have seen JSON structure but do not know, how to access it using javascript

This workshop is not for you, if:

• You have no idea about client side scripting

This workshop intends to provide hands on example on creating JSON structure and accessing the contents of the JSON using Javascript.

‘JSON’ the new kid in town

JSON which stands for JavaScript Object Notation is the new buzz word and will definitely look good in your resume! But, how is JSON useful from a technology perspective.

• JSON can store data in the client side, where data security is not important.
• JSON can be used for data exchange just like XML. But, why not XML itself? JSON comes handy when the exchanged data needs to be handled in the client side. JSON structure is easy to be manipulated in client side using javascript.

Workshop Requirement

Let us say, we need to maintain the summary of contents of this website. We want the data not to be maintained in database. We need to get information from a data structure using Javascript and of course, this data is not sensitive. The website contains, two sections (while writing this article), Java Programming and Stock Market. Each section contains categories and each category contains articles. Based on this data, we would like to see the number of pages in Java category etc.

Meeting JSON flesh and blood

Enough talking about JSON! Let us actually see a JSON structure. The code snippet provided below shows a JSON structure assigned to a Javascript variable. When we use JSON for data exchange, we will write or receive JSON structure starting from braces without the javascript variable. To convert this into a javascript variable, we can use ‘eval’ function, which is not recommended. There are parsers available in JSON.org which converts the JSON structure to javascript variable.

var varSiteData = {
  "sections" : [ //Array
     {//Each element in array, ie. Section is a structure not a simple attribute
      "name": "Java Programming", //this is a simple attribute
      "categories": [
      {
         "name":"Java Basics",
         "articles": [
         {
            "name" : "Java Hello World",
            "pages" : "1",
            "author" : "Tech Programmer"         
         },
         {
            "name" : "Java Hello World using Eclipse IDE",
            "pages" : "5",
            "author" : "Tech Programmer"         
         },
         ...
         ...
       ]
      },
      ...
      ...
     ]
    },
    ...
    ....
   ]
 }

Let us try to understand the syntax. JSON always start and end with curly braces. They contain attributes. The value of each attribute can be simple string, a structure (which internally is composed of many simple string attributes), array of simple string or array of structures. Here “section” is an attribute. How many sections we have in the site? Two, Java programming and Stock market. This calls for an array. Arrays are defined by square brackets. Now, each section contains categories. Also, each section needs a name to be stored. So, we have added an attribute by “name”. Attribute “name” is a simple string. Other attributes shown work in the same way. Click here to download the complete JSON structure stored in JS file.

• An attribute name or key cannot start with numeric value. Although this is not a rule written anywhere, when the key or attribute name starts with or is a numeric value, the javascript which parse through the JSON does not understand the key. A simple workaround to resolve this issue is to append a constant string before the numeric value. Example: “str_25”

 One more important thing is, if for an attribute, the value needs to be multiple attributes but not an array, then it is achieved using curly brackets only. A simple snippet which shows the attribute structure for Alphonsa mango:

"alphonsa" : {
  "type": "mango",
  "taste": "sweet",
  "color": "yellow"
}

Well, that’s that. We got started with JSON. But, let us try to have a quick look, why JSON is compared with XML. See the above JSON structure in an XML format.

<?xml version="1.0" encoding="ISO-8859-1"?>
<sections>
  <section>
     <name>Java Programming</name>
     <category>
        <name>Java Basics</name>
        <article>
           <name>Java Hello World</name>
           <pages>1</pages>
           <author>Tech Programmer</author>
        </article>
        <article>
           <name>Java Hello World using Eclipse IDE</name>
           <pages>5</pages>
           <author>Tech Programmer</author>
        </article>
       ...
       ...
     </category>
  </section>
..
</sections>

Validating JSON structure

Just like we validate XML structures using Internet Explorer and other tools for well-formedness, there are certain JSON viewers available, which verify the JSON structure and provide details regarding any missing braces etc. JSON Viewer is one such hand helpful too.

Javascript and JSON

Now, let us see how Javascript can access different elements within the JSON structure. We will try to calculate the total number of pages in ‘Stock Market’ and ‘Java Programming’ section. The HTML page includes the JSON data from a JS file. The javascript present in the HTML page iterates through the JSON structure to determine the result.

See the below javascript function, with comments explaining how the JSON structure is iterated through.

function getSectionTotalPages(section) {

 //entry point into JSON variable..Accessing sections attribue, which is an array
 var arrSections = varSiteData.sections;
 var totalPages = 0;
 //loop through each of the sections
 for(var i=0;i<arrSections.length;i++) {
  var currSection = arrSections[i];
  //we get the section for which we want to calculate the page total
  if(currSection.name==section) {
   //Now into category array from section
   var arrCategories = currSection.categories;
   
   //loop through the category array
   for(var j=0;j<arrCategories.length;j++) {
    var currCategory = arrCategories[j];
    //For each category, get the article list (array)
    var arrArticles = currCategory.articles;
    //loop through each article
    for(var k=0;k<arrArticles.length;k++) {
     var currArticle = arrArticles[k];
 
     //for each article, get the # of pages and add it to total
     totalPages = totalPages + parseInt(currArticle.pages);
    }
   }
   //This method works for one section, so break the loop, if the section is found
   break;
  }
 }
 return totalPages;
}

The complete HTML containing the javascripts is given below. On clicking the compare button, the compareSectionPages function is called. It internally,calls getSectionTotalPages function twice, for getting pages for 'Java Programming' section and 'Market Analysis' section.

<html>
<head>
  <title>JSON and Javascript example</title>
  <script type="text/javascript" src="website_json.js" ></script>
  <script language="javascript" type="text/javascript">
  function getSectionTotalPages(section) {
 var arrSections = varSiteData.sections;
 var totalPages = 0;
 for(var i=0;i<arrSections.length;i++) {
  var currSection = arrSections[i];
  if(currSection.name==section) {
   var arrCategories = currSection.categories;
  for(var j=0;j<arrCategories.length;j++) {

    var currCategory = arrCategories[j];
    var arrArticles = currCategory.articles;
    for(var k=0;k<arrArticles.length;k++) {
     var currArticle = arrArticles[k];
     totalPages = totalPages + parseInt(currArticle.pages);
    }
   }
   break;
  }
 }
 return totalPages;
}

  function compareSectionPages() {
   var totalJavaPages = getSectionTotalPages('Java Programming');
 var totalMarketPages = getSectionTotalPages('Market Analysis');
   var result = "<table border='1'><tr><td>Java Programming</td><td>Market Analysis</td>

</tr><tr><td>"+totalJavaPages+"</td><td>"+totalMarketPages+"</td></tr></table>";
   document.getElementById('result').innerHTML = result;
  }

  </script>
</head>
<body>
  <h2>Welcome to JSON with javascript workshop!</h2>
  <p>
  <input type="button" name="button1" value="Compare Section pages" onclick="compareSectionPages();">

  <p><p>
  Result: <div id="result"></div>
</body>
</html>

 And the result is 17 to 12. Java programming wins by 5 goals!

The author of the ‘Market analysis’ section may feel bit hard done by.  Some articles missed out were missed out. ‘Technical Analysis’ and ‘Market Summary’ articles were not considered. We added every article inside the category, but these two articles are not maintained at category level. They are maintained in section level.

Well, change is inevitable in the JSON structure! However, the flexibility of JSON will cover up for it. But, the change in data structure will cause a change to javascript code to calculate the total pages in section.

Let us get this thing fixed. For the JSON fix, a little thought will make it clear that adding articles inside section structure will be similar to articles maintained inside categories. The below code snippet shows the portion of the changed JSON:

 ...
      {
      "name":"Market Analysis",
      "articles": [
       {
          "name": "Market Summary",
          "pages": "1",
          "author" : "Market Analyst"        
       },
       {
          "name": "Tech Analysis",
          "pages": "1",
          "author" : "Market Analyst"        
       }
      ] 
      ....
     .....

The change in  getSectionTotalPages will be bit more challenging. Now, in the code we have to deal with one section, which has articles array and another which does not. Also, this method needs to be generic enough to handle any new sections added to the website in the future. Some of the section may have articles inside it and some may not. Many times, while using javascript we see the ‘undefined’ variable. We will have to use this, to check if articles array is present directly within sections.

The below modified function getSectionTotalPages will do the trick. See the comments explaining the main changes and the typeof function used to good effect.

function getSectionTotalPages(section) {
 var arrSections = varSiteData.sections;
 var totalPages = 0;
 for(var i=0;i<arrSections.length;i++) {
  var currSection = arrSections[i];
  if(currSection.name==section) {
   //Check if articles inside section is undefined (does not exist)
   //If not undefined, then section as articles like Market Analysis section
   if(typeof(currSection.articles)!='undefined') {

    var arrSecArticles = currSection.articles;
    for(var j=0;j<arrSecArticles.length;j++) {
     var currSecArticle = arrSecArticles[j];
     totalPages = totalPages + parseInt(currSecArticle.pages);

    }
   }
   var arrCategories = currSection.categories;

   for(var j=0;j<arrCategories.length;j++) {
    var currCategory = arrCategories[j];
    var arrArticles = currCategory.articles;
    for(var k=0;k<arrArticles.length;k++) {
     var currArticle = arrArticles[k];
     totalPages = totalPages + parseInt(currArticle.pages);
    }
   }
   break;
  }
 }
 return totalPages;
}

Update the HTML code contents with the above updated function. Click here to download the updated JSON code. Place the HTML and JS file in the same directory. Access the HTML page from browser and then click the ‘Compare Section pages’ button to view the result table. ‘Java Programming’ still wins by a margin of 3!

Welcome to the whole new world of client side scripting with JSON!

The workshop is for

This workshop is dedicated to all those who are stuck with cross-domain communication issue trying to fetch JSON data from a different domain using Jquery.

Introduction

This workshop is built up based on ‘JSON with Jquery’ workshop. It starts by providing a working example of JSON service accessed by Jquery and highlights cross-domain communication issue while trying to access JSON data from a different domain. It then goes on showing the resolution using JSONP (JSON with Padding).

Quick Recap

Let us have a quick recap of the example ‘JSON with Jquery’. However, it is strongly recommended to have go through JSON with Jquery workshop just to get an idea of what the example deals with. Here is a summary:

1. A HTML page has the Jquery code to access JSON and generate dynamic dropdowns.
2. There are two predefined static JSON files one for category and another for articles.

Dynamically generated JSON files

We will be modifying the previous workshop example to generate dynamic JSON files using server side components (like JSP/Servlet, PHP etc). So, we will create a JSP/PHP which spits out a JSON data. We create a PHP file by the name getSiteJSON.php. Here, we merge the content of two static JSON files used previously into a single server component. Note that our JSON file is still static, as the contents are hardcoded. However, in real life your JSON contents will be dynamically pulled from the database.

The below code snippet highlights the change in the Jquery JSON call in the html file.

$.getJSON("http://www.stage3.tech-freaks.in/sourcecode/jquery_jsonp/
                      getSiteJson.php?type=category",  function(json) {
          var catJson = json[sSec];
          var options = "<option value=\"select\">Select</option>";
          for(i=0;i<catJson.length;i++) {

The below code snippets is a PHP code which generates JSON.

   $type = $_GET['type'];
    $jsonData = "";
    if($type=="category")
        $jsonData = "{\"java_programming\": [ { \"ky\": \"java_basics\", ....}]}";
    else
        $jsonData = "{\"java_basics\": [\"Java Hello World - Tech Programmer\", ...]}";
    echo $jsonData;

 You may want to check the working of the getSiteJSON.php by accessing the page directly with query parameter of ‘type=category’ or ‘type=article’ and see the JSON printed in the page.

Cross domain JSON fetch

Now, let us assume that we want to get the site data as JSON from a different site. From a technical perspective, this means that getSiteJSON.php or some service similar to it is present in a different domain. This is common with JSON services provided by a different site and used by another site. 

For this workshop, we simulate this scenario by hosting the getSiteJSON.php in www.stage3.tech-freaks.in and the HTML page which fetches the JSON content using Jquery in www.tech-freaks.in.

Uploading files…..

Check JSON service from cross-domain by checking this demo.

Oops! The drop-downs are not loading. Let check the error console in FireFox (from menu Tools >> Error Console).

We see two error lines as below:

Error: [Exception... "Access to restricted URI denied"  code: "1012" nsresult: "0x805303f4 (NS_ERROR_DOM_BAD_URI)"  location: "... Line: ..."]
Source File: ....
Line: ...

Security Error: Content at file:... may not load data from .....

Hmmm, this is a cross domain JSON data fetch issue. So, when you try to access a JSON data using Jquery/AJAX call from a different domain, we see the browser slapping the above error message on our face.

Where do we go from here?

JSONP comes to the party

JSONP stands for JSON with Padding. It is a work around used to resolve the cross domain dynamic JSON fetch problems by wrapping the JSON data in a function. So, what we return is something like:

functionName({"java_programming": [ { "ky": "java_basics", "val": "Java Basics" }, ...]})

The function name is passed as a parameter. In Jquery, during the getJSON call we pass a parameter ‘callback=?’. Jquery support JSONP and automatically generations a function name. The callback is the parameter in which the function name is passed.

Let us get to work. We want to modify the code for implementing JSONP.

• jquery_json.html : Rename this file to jquery_jsonp.htmlfor convention purpose. We will modify the jquery call in this HTML file to implement JSONP. The below code snippet highlights this call. 

$.getJSON("http://www.stage3.tech-freaks.in/sourcecode/jquery_jsonp
  /getSiteJsonp.php?type=category&callback=?", function(json) {
 var catJson = json[sSec];
 var options = "<option value=\"select\">Select</option>";

• getSiteJSON.php: Rename this file to getSiteJSONP.php to provide an informative file name. We modify the code to return a padded JSON instead of simple JSON. The below snippet explains how the ‘callback’ parameter is used to pad the JSON data with function name.

 //echo $jsonData;
 echo $_GET['callback']."(".$jsonData.")";

See JSONP in action. See how the dropdowns get generated dynamically by fetching data from www.stage3.tech-freaks.in.

Download the complete PHP source for JSONP implementation (JSP Sourcecode for JSONP Implementation coming soon!).

You no longer have to implement all services in house inside your domain. You can use JSONP to fetch JSON data using services implemented outside your domain.

Phew! The struggle finally ended. You deserve to put your feet up for sometime and enjoy a cup of coffee!

This workshop is for you, if:

• You would like to know how Jquery and JSON work together
• You are trying to create series of dependent dropdowns based on data present in client side

Quick Introduction
A brief introduction of the two technologies used in this workshop are given below.

Jquery:
Jquery is a Javascript library. It provides useful functions for css and html elements manipulation. It has a weird }); syntax all over the place, but once you understand it, you can quickly develop the javascript stuffs with little pain. It serves as a wrapper over the basic javascript elements. It also provides a wrapper over the AJAX api. For more details visit http://www.jquery.com/. You can also download the latest Jquery library from their website.

JSON:
JSON which stands for JavaScript Object Notation, is a client side data structure to store and exchange data similar to XML. Check out our article on JSON for more details.

Requirements

We would like to create a series of dropdown for our website. The first dropdown will provide a list of sections (i.e. Java Programming and Market Analysis). On selecting, it should display another dropdown with list of categories (like Java Basics, JSP & Servlets etc). On selecting the category, it should display a bullet list of articles under this selection. We do not want our page to get refreshed on each select. However, for this example, we assume that we maintain the data in a static file in the client side instead fetching data from server side.

Solution

We identify and describe each element necessary for implementing the above mentioned requirement.

Data storage:
As per the requirement, we would like to store the data in a static file. We generally have three options viz. Properties file, XML file and JSON file. Since we need to handle everything from client side using Jquery, JSON would be the best bet.

We maintain two different json files.

• site_category.json –  Maintains data related to sections and categories
• site_articles.json –  Maintains the data related to categories and articles

The below code snippet shows a snapshot of the two JSON. We could have created single JSON for maintaining both the data. Also, we could have structured it in a different way, but our aim here is to understand the interaction of JSON with Jquery… so let us move on.

{
  "java_programming": [
    {
      "ky": "java_basics", //Used for select options value to be passed
      "val": "Java Basics" //Used for dropdown value to be displayed
    
    },
    {
      "ky": "jsp_servlets",
      "val": "JSP & Servlets"
    },
    {
      "ky": "javascripts",
      "val": "Javascripts"
    }
  ], 
  ...

 

{
   "java_basics": ["Java Hello World - Tech Programmer", "Java Hello World using Eclipse IDE - Tech Programmer",
      "Reading Java API documents - Tech Programmer",
       "Common Java Exception and Error reference catalog - Tech Programmer"],
   "jsp_servlets": ["First JSP/Servlet Workshop - Tech Programmer", "Integrating Eclipse with Tomcat - Tech Programmer",
      "Session Based Shopping Cart - Tech Programmer"],
    ...

Web page

We need to create a simple html page in which all the action takes place. By action we mean, selecting one dropdown causing another dropdown to be displayed and so on. List of things to be done in this page are given below:

1. Add three html div elements. Two for each dropdowns and one for the article list.
2. Are we using Javascript? No. Don’t we need to import some library? We are planning to use Jquery. We need to import Jquery library into the page. So, download and add a javascript link to it.
3. We need to write the jquery code for performing all the on change action.

Let us go through each of the task in detail to finish off this workshop. Here we go….

1. Adding three html DIV elements

<div style="position: absolute; top: 50px; left: 5px">Section: <select id="section" name="section">
<option value="select">Select</option>
<option value="java_programming">Java Programming</option>
<option value="market_analysis">Market Analysis</option>
</select>
</div>

<div id="divCategory" style="position: absolute; top: 80px; left: 5px; display:none">
  Category: <select id="category" name="category"></select>
</div>
<div id="divArticles" style="position: absolute; top: 120px; left: 5px; display:none">test
</div>

Note the last two DIV elements are marked as hidden for starters by setting the style as ‘display:none’. Have you noticed the missing onChange on each of the select/options element? Not sure, how all these are going to work!

2. Adding link to Jquery library:

<script type="text/javascript" src="static/jquery-1.3.1.js"></script>

We need to create a folder structure. We maintained the html as jquery_json.html in the root directory. We created a static folder inside it and add the jquery and JSON.

Wait there! There is no link added to json file. Interesting! The JSONs are not used directly as javascript variables. We will have Jquery look up for it and convert it into an object. Hang on, you will see.

3. Writing Jquery code:

Welcome to the fun side of this workshop!

We start by adding script tag in our page just the way we add for writing any javascript in page. We then use the jquery check for document readiness.

<script type="text/javascript">
   $(document).ready( function() {

    });
</script>

We write all the code inside the ready block. It checks, if the page is loaded in the browser completely before other events start firing. Get used to the }); syntax and you will start enjoying too! 

Now, we need to write something which is similar to a javascript onChange. But the best part here is that you do not have to attach an onchange into your html select.

 $("#section").change( function () {

  }

The pound (#) symbol refers to the id attribute value of the html element. Jquery also provides option of accessing by class name of the element and element itself. Like $(€œ.class€) and $(‘div’). Refer to Jquery documentation (http://docs.jquery.com/) for more details.

Getting back to our example, all the code for on selection of a section should go inside the above change function.

We may have lots of logic but one thing worthwhile to look at is how the JSON is accessed from Jquery. See the snippet below:

 $.getJSON("static/site_category.json",  function(json) {
        var catJson = json[sSec];//Fetch content for appropriate section
        var options = "<option value=\"select\">Select</option>";//A variable which we build
        for(i=0;i<catJson.length;i++) {//iterating contents for the selected section
         
          options +="<option value=\""+catJson[i].ky+"\">"+catJson[i].val+"</option>";//generate option for each category
        }
        $("#category").html(options);//inject options into select tag
        $("#divCategory").show();//Magic! show the category div   
       });
      }

$getJSON is one of the functions in Jquery. It is basically an AJAX implementation. This means, you can also call a JSP, Servlet or PHP which returns a JSON object. Well, do not worry, it will not be left as homework. We will be writing another article with these details.

So, we are just pointing to the JSON and passing it a callback function. There are other parameters which can be passed into this function but we are only using two here. The callback function gets the JSON as a variable which we can have fun with. See the inline comments describing all the fun I’ve had with it.

On selection of category, a list of articles is displayed in the same way. The source is bundled into zip and can be downloaded by clicking here (jquery_json.zip).

You can check this stuff in action by accessing the link (Code in action).

This example is close to an AJAX based dropdown list. Once you understand this we would like to explain how we could use Jquery  and JSON to access dynamic server side objects for generating subsequent dropdowns.

It is time for us to welcome Jquery, the Prince, who will be the next King to rule the client side world!