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.

the data will be always in this type ( an array of object with arrays ) or you can have other nested arrays ? — AlainIb
– AlainIb, Commented Apr 11, 2016 at 7:51
you have a typo too. it should be "John": instead of "John"= (same for Ben= — AlainIb
– AlainIb, Commented Apr 11, 2016 at 7:52
Do you want it to be in a single table or a table for each person? — D_R
– D_R, Commented Apr 11, 2016 at 7:56

Syam Pillai · Accepted Answer · 2016-04-11 08:10:16Z

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>

answered Apr 11, 2016 at 8:10

Syam Pillai

5,2202 gold badges31 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

AlainIb · Accepted Answer · 2016-04-11 08:03:13Z

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"}]
 }];

answered Apr 11, 2016 at 8:03

AlainIb

4,6156 gold badges42 silver badges67 bronze badges

Comments

Shashank Agrawal · Accepted Answer · 2016-04-11 08:00:19Z

1

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>

answered Apr 11, 2016 at 8:00

Shashank Agrawal

25.9k11 gold badges98 silver badges126 bronze badges

1 Comment

MrsPop88 Over a year ago

Thank you, I did not know you could have multiple <tbody>s in a table. I was trying to use a <span> then a <tr>. This is nicer and it works

Hadi · Accepted Answer · 2016-04-11 08:04:53Z

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>

Collectives™ on Stack Overflow

ng-repeat in nested array in AngularJS

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related