How to display array with ng-repeat

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.

Do some research, documenting what research was done, what was found, and, if it didn’t solve the problem, why. Create a small prototype that isolates the issue. Make at least one attempt at implementing a solution. — georgeawg, Mar 22 '19 at 23:21
See [How do I ask and answer homework questions?](https://meta.stackoverflow.com/questions/334822/how-do-i-ask-and-answer-homework-questions). — georgeawg, Mar 22 '19 at 23:23
Possible duplicate of [ng-repeat Angular and JSON array](https://stackoverflow.com/questions/27115100/ng-repeat-angular-and-json-array) — William Humphreys, Mar 22 '19 at 23:49

score 0 · Answer 1 · answered Mar 25 '19 at 18:59

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

How to display array with ng-repeat

1 Answers1