Angular - loop over nested javascript arrays

Question

How can I use ng-repeat to loop over data that contains many nested array data?

I have data that will have many "Segments"

Example:

confirm.booking.flightData[0].Segments[0].FlightNumber
confirm.booking.flightData[0].Segments[1].FlightNumber
confirm.booking.flightData[0].Segments[2].FlightNumber

I have done both ng-repeat with angular, and without angular I would end up resorting to javascript that loops over data and creates the html dynamically, but I wish to do this the ANGULAR way.. HOW?

HTML with Angular/Javascript Arrays:

<div class="container-fluid">
    <div class="row">
        <div class="col-md-4">
            <span style="font-weight: bold;">Flight</span>
        </div>
        <div class="col-md-4">
            <span style="font-weight: bold;">Departs</span>
        </div>
        <div class="col-md-4">
            <span style="font-weight: bold;">Arrives</span>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
          {{confirm.booking.flightData[0].Segments[0].FlightNumber}}
        </div>
        <div class="col-md-4">
          ({{confirm.booking.flightData[0].Segments[0].DepartureAirport}})
        </div>
        <div class="col-md-4">
            ({{confirm.booking.flightData[0].Segments[0].ArrivalAirport}})  
        </div>
    </div>
</div>

Answer 1

Nesting can be done in repeats, but repeating too much in ng-repeats can be costly in terms of performance as angular creates scopes for each element repeated. Hence, filtering data till the perfect abstracted values that you need in terms of html should be done in the js file.

For eg: if u need only segements in the html form do this, or if u need even flight data in html form follow @Rachel's post

<ul data-ng-repeat="item in confirm.booking.flightData[0].Segments">
    <li>{{ item.FlightNumber}}</li>
</ul>

Answer 2

Let's say your data is in flightdetails, then you can go about it like this:

 <div ng-repeat="a in flightdetails ">
        <div  ng-repeat="b in a.booking">
          <div  ng-repeat="c in b.flightdata">
           <div  ng-repeat="d in c.segments">
                 {{d.flightnumber}}
           </div>
         </div>
      </div>
  </div>

Answer 3

You can use nested ng-repeat to bind your data - see a demo below:

angular.module("app", []).controller("ctrl", function($scope) {

  $scope.confirm = {
    booking: {
      flightData: [{
        Segments: [{
          FlightNumber: 1
        }, {
          FlightNumber: 2
        }]
      }, {
        Segments: [{
          FlightNumber: 3
        }, {
          FlightNumber: 4
        }]
      }]
    }
  }
  // console.log($scope.confirm);
});

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

<div class="wrapper" ng-app="app" ng-controller="ctrl">
  <div ng-repeat="x in confirm.booking.flightData">
    Data {{$index + 1}}:
    <div ng-repeat="y in x.Segments">
      <div>Flight No: {{y.FlightNumber}}</div>
    </div>
    <br/>
  </div>
</div>

If you want to display only the following:

confirm.booking.flightData[0].Segments[0].FlightNumber
confirm.booking.flightData[0].Segments[1].FlightNumber
confirm.booking.flightData[0].Segments[2].FlightNumber

then you can use limitTo - see demo below:

angular.module("app", []).controller("ctrl", function($scope) {

  $scope.confirm = {
    booking: {
      flightData: [{
        Segments: [{
          FlightNumber: 1
        }, {
          FlightNumber: 2
        }]
      }, {
        Segments: [{
          FlightNumber: 3
        }, {
          FlightNumber: 4
        }]
      }]
    }
  }
  // console.log($scope.confirm);
});

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

<div class="wrapper" ng-app="app" ng-controller="ctrl">
  <div ng-repeat="x in confirm.booking.flightData | limitTo : 1">
    Data {{$index + 1}}:
    <div ng-repeat="y in x.Segments">
      <div>Flight No: {{y.FlightNumber}}</div>
    </div>
    <br/>
  </div>
</div>

Answer 4

I created an example here:

http://codepen.io/ackzell/pen/ENBymo

It ultimately looks like this, but check the pen as it has some more info:

<ul>
  <li ng-repeat="flight in vm.flightData">
    <ul>
      <li ng-repeat="segment in flight.Segments">
        <em>FlightNumber</em> {{ segment.FlightNumber }}
        <br />
        <em>Departure:</em> {{ segment.DepartureAirport }}
        <br />
        <em>Arrival:</em> {{ segment.ArrivalAirport }}
      </li>
    </ul>
  </li>
</ul>

Nesting ng-repeats would help, but maybe you want to give your data some treatment first.