Styjun

I have an json array of the form":

 
 "School1": ["name": "john", "age":"28",
 "name": "paul", "age":"27"],
 "School2": ["name": "david", "age":"27",
 "name": "sil", "age":"28"] 

How do I display in the table in this form using ng-repeat in Angular:

----------
Name | Age
----------
School1 
----------
john | 28
----------
paul | 2
----------
School2
----------
david| 27
----------
sil| 28
----------

I will Apreciate help with this.

You can perform some operation on your data and can create another object with the modified structure so that it can be used with ng-repeat to display the table in the form you want.

You can understand this better with an example.

This is your data that you want to display in table view

 $scope.testData = 
 "School1": ["name": "john", "age":"28",
 "name": "paul", "age":"27"],
 "School2": ["name": "david", "age":"27",
 "name": "sil", "age":"28"] 
 

We perform an operation on "testData" to identify the keys in this JSON Object which are "School1" and "School2".Following line performs that operation.

$scope.keys = Object.keys($scope.testData);

$scope.keys will be an array of keys : ["School1",School2"];

Then you can iterate on the array of keys and create another object that can be used with ng-repeat in HTML code.
Following lines perform create that object(tableData):

$scope.tableData=[];
 //Iterating on array of keys
 $scope.keys.forEach(element => 
 $scope.tableData.push(
 column : element,
 data : $scope.testData[element] //Getting your data from testData 
 );
 );

Final Code Snippet that will go in the controller will be :

 $scope.testData = 
 "School1": ["name": "john", "age":"28",
 "name": "paul", "age":"27"],
 "School2": ["name": "david", "age":"27",
 "name": "sil", "age":"28"] 
 

 $scope.keys = Object.keys($scope.testData); 

 $scope.tableData=[];
 $scope.keys.forEach(element => 
 $scope.tableData.push(
 column : element,
 data : $scope.testData[element]
 );
 );

And your HTML Code will go something like this:

<table>
 <tr>
 <th>Name |</th>
 <th>Age</th>
 </tr>
</table>
<table ng-repeat="table in tableData">
 <tr>
 <th>table.column</th>
 </tr>
 <tr ng-repeat="row in table.data">
 <td>row.name | </td>
 <td>row.age</td>
 </tr>
</table>

You can definitely beautify the table view by writing your own css or by including any predefined stylesheets.
Hope that helps!!