ng-repeat over multidimensional array in AngularJS

Question

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?

I have added an answer with working reference.

Nikhil Aggarwal
– Nikhil Aggarwal

2015-07-29 18:39:40 +00:00
Commented Jul 29, 2015 at 18:39 — Nikhil Aggarwal
– Nikhil Aggarwal, Commented Jul 29, 2015 at 18:39

Nikhil Aggarwal · Accepted Answer · 2015-07-29 18:39:00Z

2

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

edited Jul 29, 2015 at 18:39

answered Jul 29, 2015 at 18:31

Nikhil Aggarwal

28.5k4 gold badges46 silver badges61 bronze badges

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

1 Comment

user3718908x100 Over a year ago

Thanks, exactly what i was looking for! :D

Mathew Berg · Accepted Answer · 2015-07-29 18:33:01Z

1

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>

answered Jul 29, 2015 at 18:33

Mathew Berg

28.8k11 gold badges72 silver badges94 bronze badges

Comments

ajmajmajma · Accepted Answer · 2015-07-29 18:40:36Z

0

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/

edited Jul 29, 2015 at 18:40

answered Jul 29, 2015 at 18:28

ajmajmajma

14.3k25 gold badges83 silver badges139 bronze badges

4 Comments

user3718908x100 Over a year ago

I just updated my post, VIP and VVIP are just placeholders since i dunno what i supposed to go there, i want to be able to dynamically display those 'keys' as text to be used for each table header.

ajmajmajma Over a year ago

@user3718908 then strip the keys, updated answer (Added a fiddle too)

user3718908x100 Over a year ago

I tried that but instead of displaying the key names it displayed numbers: 0,1. Plus in your fiddle it just re-displays the JSON in the result there is no header.

ajmajmajma Over a year ago

@user3718908 updated again - try that fiddle see if that's what you want

Collectives™ on Stack Overflow

ng-repeat over multidimensional array in AngularJS

3 Answers 3

1 Comment

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related