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