ng-repeat in nested array in AngularJS

Question

I am having a problem. I have an array.

myArray = [{ 
 "John": [{"salary":"15K","year":"2013"},{"salary":"20K","year":"2014"}]
},{
 "Ben": [{"salary":"17K","year":"2013"},{"salary":"20K","year":"2014"},{"salary":"25K","year":"2014"}]
 }];

I want it to display in a table.The array can have much more data. Please someone, tell me If I am arranging the array wrong or something. I am stuck in this for sometime now.

Answer 1

a table for each user :

http://plnkr.co/edit/LSkW8mWwloDF65iahbAH?p=preview

  <div ng-repeat="user in users">
     <div ng-repeat="(key,value) in user">
       {{key}}
       <table>
         <tr>
           <th>salary</th>
           <th>year</th>
         </tr>
         <tr ng-repeat="s in value">
           <td>{{s.salary}}</td>
           <td>{{s.year}}</td>
         </tr>
       </table>
    </div>
    <br>

  </div>

and in controller :

 $scope.users=[{ 
 "John":[{"salary":"15K","year":"2013"},{"salary":"20K","year":"2014"}]
},{
 "Ben":[{"salary":"17K","year":"2013"},{"salary":"20K","year":"2014"},{"salary":"25K","year":"2014"}]
 }];

Answer 2

try like this.

var app = angular.module("app",[]);

app.controller("ctrl" , function($scope){
  
  $scope.myArray=
   [
    { 
      "John":
       [
         {"salary":"15K","year":"2013"},
         {"salary":"20K","year":"2014"}
       ]
    },
    {
     "Ben":
      [
        {"salary":"17K","year":"2013"},
        {"salary":"20K","year":"2014"},
        {"salary":"25K","year":"2014"}
      ]
    }
  ];
  
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl" class="panel-group" id="accordion">
    <table>
      <thead>
         <th>Name</th>
         <th>Info</th>
       </thead>
      <tbody ng-repeat="(key,value) in myArray">
        <tr ng-repeat="(key1,value1) in value">
          <td>{{key1}} :</td>
          <td ng-repeat="d in value1">
            <table>
              <thead>
                  <th>Salary</th>
                  <th>Year</th>
              </thead>
                 <tr>
                   <td>{{d.salary}}</td>
                   <td>{{d.year}}</td>
                 </tr>
            </table>
          </td>
        </tr>
      </tbody>
      </table>
</div>

Answer 3

angular.module("sa", []).controller("foo", function($scope) {

  $scope.myArray = [{
    "John": [{
      "salary": "15K",
      "year": "2013"
    }, {
      "salary": "20K",
      "year": "2014"
    }]
  }, {
    "Ben": [{
      "salary": "17K",
      "year": "2013"
    }, {
      "salary": "20K",
      "year": "2014"
    }, {
      "salary": "25K",
      "year": "2014"
    }]
  }];

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="sa" ng-controller="foo">
  <div ng-repeat="(key, value) in myArray">
    <div ng-repeat="(name, salaries) in value">
      <strong>{{name}}</strong>
      <br>
      <div ng-repeat="data in salaries">
        Salary: {{data.salary}} in {{data.year}}
      </div>
      <hr>
    </div>
  </div>

Answer 4

It will be great if you specified the format of the table. If you want a table like table-heads as name and values. In names we can show the name and inside values there is another table of salary and year. For such a table you can follow steps as given below.

<table>
  <tr>
    <th>Name</th>
    <th>Values</th>
  </tr>
  <tr ng-repeat="person in myArray">
    <td>{{person.name}}</td>
    <td>
      <table>
        <tr>
          <th>Salary</th>
          <th>Year</th>
        </tr>
        <tr ng-repeat="each in person">
          <td>{{each.salary}}<td>
          <td>{{each.year}}<td>
        </tr>
      </table>
    </td>
  </tr>
</table>