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

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>