CODEWITHSUNDEEP
angularjsmultidimensional-arrayangularjs-ng-repeat
user3718908x100
user3718908x100

Reputation: 8509

ng-repeat over multidimensional array in AngularJS

Hello i have the following JSON returned from my server:

{
    "travelSchedules":{
        "VIP":[
            {"id":1,"travel_company_id":1,"travel_route_id":3,"class":"VIP","fare":300,"reporting_time":"09:00:00","departure_time":"09:15:00","weekday":"Mon","end_date":"2015-07-24","is_active":1,"created_at":"2015-07-23 15:46:14","updated_at":"2015-07-23 15:46:14","deleted_at":null},
            {"id":3,"travel_company_id":1,"travel_route_id":3,"class":"VIP","fare":300,"reporting_time":"09:00:00","departure_time":"09:15:00","weekday":"Wed","end_date":"2015-07-24","is_active":1,"created_at":"2015-07-23 15:46:14","updated_at":"2015-07-23 15:46:14","deleted_at":null},
            {"id":5,"travel_company_id":1,"travel_route_id":3,"class":"VIP","fare":300,"reporting_time":"09:00:00","departure_time":"09:15:00","weekday":"Thu","end_date":"2015-07-24","is_active":1,"created_at":"2015-07-23 15:46:15","updated_at":"2015-07-23 15:46:15","deleted_at":null},
            {"id":7,"travel_company_id":1,"travel_route_id":3,"class":"VIP","fare":300,"reporting_time":"09:00:00","departure_time":"09:15:00","weekday":"Fri","end_date":"2015-07-24","is_active":1,"created_at":"2015-07-23 15:46:15","updated_at":"2015-07-23 15:46:15","deleted_at":null},
            {"id":9,"travel_company_id":1,"travel_route_id":3,"class":"VIP","fare":300,"reporting_time":"09:00:00","departure_time":"09:15:00","weekday":"Sat","end_date":"2015-07-24","is_active":1,"created_at":"2015-07-23 15:46:15","updated_at":"2015-07-23 15:46:15","deleted_at":null}
        ],
        "VVIP":[
            {"id":2,"travel_company_id":1,"travel_route_id":3,"class":"VVIP","fare":450,"reporting_time":"09:00:00","departure_time":"09:15:00","weekday":"Mon","end_date":"2015-07-24","is_active":1,"created_at":"2015-07-23 15:46:14","updated_at":"2015-07-23 15:46:14","deleted_at":null},
            {"id":4,"travel_company_id":1,"travel_route_id":3,"class":"VVIP","fare":450,"reporting_time":"09:00:00","departure_time":"09:15:00","weekday":"Wed","end_date":"2015-07-24","is_active":1,"created_at":"2015-07-23 15:46:14","updated_at":"2015-07-23 15:46:14","deleted_at":null},
            {"id":6,"travel_company_id":1,"travel_route_id":3,"class":"VVIP","fare":450,"reporting_time":"09:00:00","departure_time":"09:15:00","weekday":"Thu","end_date":"2015-07-24","is_active":1,"created_at":"2015-07-23 15:46:15","updated_at":"2015-07-23 15:46:15","deleted_at":null},
            {"id":8,"travel_company_id":1,"travel_route_id":3,"class":"VVIP","fare":450,"reporting_time":"09:00:00","departure_time":"09:15:00","weekday":"Fri","end_date":"2015-07-24","is_active":1,"created_at":"2015-07-23 15:46:15","updated_at":"2015-07-23 15:46:15","deleted_at":null},
            {"id":10,"travel_company_id":1,"travel_route_id":3,"class":"VVIP","fare":450,"reporting_time":"09:00:00","departure_time":"09:15:00","weekday":"Sat","end_date":"2015-07-24","is_active":1,"created_at":"2015-07-23 15:46:15","updated_at":"2015-07-23 15:46:15","deleted_at":null}
        ]
    }
}

Which i assign to $scope.travelSchedules in my application. Now i want to loop through the data and display each group in a single table. like this:

<div ng-repeat="group in groups">
  <h1>VIP</h1>
    <table>
      <tr ng-repeat="row in VIP">
        ...
      </tr>
  </table>
</div>

<div ng-repeat="group in groups">
  <h1>VVIP</h1>
    <table>
      <tr ng-repeat="row in VIP">
        ...
      </tr>
  </table>
</div>

Please note here that the groups i am referring to are: VIP, VVIP They are loaded dynamically from the server meaning there can be more than these 2.

Also each group name is actually a 'key' in the array. I do not know how to go about this sadly.

Edit: VIP and VVIP are just placeholders, the code i posted is actually just to show what i want to achieve, looking at my array my issue is how do i get to display the names 'VIP and 'VVIP' as headers for each table in the loop?

Upvotes: 1

Views: 1567

Answers (3)

ajmajmajma
ajmajmajma

Reputation: 14216

Something like this - 

<div ng-controller="MyCtrl">
<div ng-repeat="(key, val) in travelSchedules">
     <h1>{{key}}</h1>
        <table ng-repeat="group in val">
            <tr ng-repeat="row in group"><td>{{row}}</td></tr>
        </table>
  </div>
</div>

See fiddle for example - http://jsfiddle.net/HB7LU/15846/

Upvotes: 0

Nikhil Aggarwal
Nikhil Aggarwal

Reputation: 28455

As travelSchedules is an object, so you need key value pair to iterate on it. The key will be VIP or VVIP or anything that json returns and value will be corresponding array. Now, you will need to iterate on that array to paint data. You need to update your html to following

<div ng-repeat="(key, value) in travelSchedules">
    <h1>{{key}}</h1>
    <table>
      <tr ng-repeat="row in value">
        ...
      </tr>
    </table>
</div>

For reference - http://plnkr.co/edit/nou8baooWz6cG1UjZXPT?p=preview

Upvotes: 2

Mathew Berg
Mathew Berg

Reputation: 28750

In an ng-repeat you can get access to the key like so:

<tr ng-repeat="(key, value) in data">
    <th>{{ key }}</th>
    <td>{{ value}}</td>
</tr>

Upvotes: 1

Related Questions