How to display array with ng-repeat - angularjs

Question

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.

Answer 1

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!!