Dynamic table generation for JSON schema using Angular JS

1. Here is sample schema, which will be used to generate table header.

 {
    "$schema" : "http://json-schema.org/draft-04/schema#",
    "type" : "array",
    "items" : {
        "type" : "object",
        "properties" : {
            "id" : {
                "type" : "integer",
                "title" : "Record ID"
            },
            "rowType" : {
                "type" : "string"
            },
            "recordName" : {
                "type" : "string",
                "title" : "Record Name"
            },
            "createdBy" : {
                "type" : "string",
                "title" : "Created By"
            },
            "creationDate" : {
                "type" : "string",
                "title" : "Creation Date"
            },
            "lastUpdatedBy" : {
                "type" : "string",
                "title" : "Last Updated By"
            }
        }
    }
}

2. Create a REST service to populate data into table. This is sample for GET method response.

 {  
   "list" : [  
     {  
       "createdBy" : "rash",  
       "creationDate" : "2015-09-15",  
       "id" : 1000010412,  
       "lastUpdatedBy" : "rash",  
       "recordName" : "Adithya",  
       "rowType" : "rashmi's object"  
     },  
     {  
       "createdBy" : "rash",  
       "creationDate" : "2015-09-15",  
       "id" : 1000010413,  
       "lastUpdatedBy" : "rash",  
       "recordName" : "Padmaja",  
       "rowType" : "rashmi's object"  
     },  
     {  
       "createdBy" : "rash",  
       "creationDate" : "2015-09-15",  
       "id" : 1000010414,  
       "lastUpdatedBy" : "rash",  
       "recordName" : "ashwani",  
       "rowType" : "rashmi's object"  
     }  
   ]  
 }  

3. Create a html page with text boxes, buttons and table. Page will look like this:

4. Table generation code (Inside html file):

1:  <table style="border: 1px solid black; margin: 0px auto;">  
2:            <thead>  
3:              <tr>  
4:                <th style="border: 1px solid black; width: 100%; height: 100%"  
5:                  data-ng-repeat="v1 in tableColumns">  
6:                  <span data-ng-if="response[v1].title!=null">{{ response[v1].title}}</span>  
7:                  <span data-ng-if="response[v1].title==null">{{ v1}}</span>  
8:                </th>  
9:              </tr>  
10:            </thead>  
11:            <tbody>  
12:              <tr data-ng-repeat="dataVal in data">  
13:                <td style=" border: 1px solid black;" data-ng-repeat="v2 in tableColumns">  
14:                  <span>{{dataVal[v2]}}</span>  
15:                </td>  
16:              </tr>  
17:            </tbody>  
18:          </table>  

• Line 5: Repeating on table columns.
• Line 6: If title is present in schema then display title otherwise display key value.
• Line 12 to 14: Populating table data based on service output.

5. Table generation code  (Inside controller file):

1:  app.controller("schemaParseController", function ($scope, $http) {  
2:    $scope.schemaUrl = "http://sttool32.idc.oracle.com/WebServices/MCS/MCS%20usecase%203/recordSchema.json";  
3:    $scope.serviceUrl = "http://127.0.0.1:7101/REST_AllOperations-Project1-context-root/resources/project1";  
4:    $scope.invokeSchema = function () {  
5:      $http.get($scope.schemaUrl).success(function (output) {  
6:        $scope.response = output.properties;  
7:        if ($scope.response == null) {  
8:          $scope.response = output.items.properties;  
9:        }  
10:        $scope.fillTableColumns();  
11:      });  
12:    }  
13:    $scope.invokeService = function () {  
14:      $http.get($scope.serviceUrl).success(function (service) {  
15:        $scope.data = service.list;  
16:      });  
17:    }  
18:    $scope.fillTableColumns = function () {  
19:      $scope.tableColumns = [];  
20:      for (var i in $scope.response) {  
21:        $scope.tableColumns.push(i);  
22:      }  
23:    }  
24:  });  

6. At run time:

• Specify schema url and click on Generate table button.
• Inside controller Line 5 (invoke schema()) is getting called, It requests for schema file over HTTP. Line 10 fillTableColumns function is executed to store key value of schema inside table columns array.

Generate Table Header

• Specify service url and click on invoke service button.
• Inside controller Line 13 is executed, It sends GET request to service. 

Populated Table

Display TOOLTIP in angular js on mouseover

Define module and controller for Angular JS application. Controller class contains business logic behind the application. Create a html page and bind it  to controller using data-ng-controller directive.

1. Inside html file create a <div> where you want to display output on mouseover. output is getting displayed based on 'temp' variable value.

 <div data-ng-show="temp">{{TOOLTIP}}</div>  

2. Create two functions inside controller.

• hoverIn function takes a input and set the value of 'temp' to true.
• hoverOut function  set temp variable to false. 

  $scope.hoverIn = function (value) {  
       $scope.temp = true;  
       $scope.TOOLTIP= value;  
      }  
  $scope.hoverOut = function () {  
       $scope.temp = false;  
      }  

3. Populating table header with data-ng-repeat.

• When you hover on particular table header, hoverIn function is getting called with tooltip value.
• When mouse leaves column, hoverOut function is getting executed and it sets temp value to false. so previously displayed tooltip will disappear. 

 
       <table style="border: 1px solid black; margin: 0px auto;">  
           <thead>  
             <tr>  
               <th style="border: 1px solid black" data-ng-repeat="v1 in tableColumns"  
                 ng-mouseover="hoverIn(v1.TOOLTIP)" ng-mouseleave="hoverOut()">  
                 <span>{{v1.title}}</span>
               </th>  
             </tr>  
           </thead>  
         </table>