title: Looping through array in Angular 2
body: <p>Component:</p>
  
  <pre><code>export class PersonalRecordsComponent implements OnInit {
    currentUser = [];
    userRecords = [];
    movements = [
      "Back Squat",
      "Bench Press",
      "Clean",
      "Clean &amp; Jerk",
      "Custom Movement",
      "Deadlift",
      "Front Squat",
      "Jerk",
      "Power Clean",
      "Power Snatch",
      "Push Press",
      "Snatch",
      "Strict Press"
    ];
  
    constructor(private afService: AF) {
      // Get current user details.
      afService.getCurrentUserInfo().then(currentUserDetails =&gt; {
        this.currentUser.push(currentUserDetails);
      }).then(() =&gt; {
        for(let movement of this.movements) {
          this.afService.getRecords(movement, this.currentUser[0].userID).subscribe((data) =&gt; {
            this.userRecords.push(data);
          });
        }
      }).then(()=&gt;{
        console.log(this.userRecords)
      })
    }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;ng-container *ngFor="let record of userRecords"&gt;
          &lt;div class="list-athletes"&gt;
            &lt;div class="list-athletes-details"&gt;
              &lt;p&gt;{{ record.movement }} - {{ record.weight }}&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="list-athletes-actions"&gt;
              &lt;div class="btn-group"&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/ng-container&gt;
  </code></pre>
  
  <p>The above code outputs 13 <code>&lt;div&gt;</code>'s, which is correct but they are empty due to <code>*ngFor="let record of userRecords"</code>.  If I instead write <code>*ngFor="let record of userRecords[0]"</code> in the *ngFor loop, it outputs the correct data, but only for the first array, obviously.</p>
  
  <p>My question is:  How do I output the correct data for each of the 13 arrays without writing 13 <code>*ngFor</code> loops, such as:</p>
  
  <pre><code>*ngFor="let record of userRecords[0]"
  *ngFor="let record of userRecords[1]"
  *ngFor="let record of userRecords[2]"
  </code></pre>
  
  <p>etc.</p>
  
  <p>Each one of these arrays can contain multiple objects.</p>
  
  <pre><code>[
    [
      {
        "comments": "Back squat comment alpha",
        "movement": "Back Squat",
        "userID": "wDHZv3OL55SIymHkhMUejNleNkx1",
        "weight": "365"
      },
      {
        "comments": "Back squat comment bravo",
        "movement": "Back Squat",
        "userID": "wDHZv3OL55SIymHkhMUejNleNkx1",
        "weight": "325"
      }
    ],
    [],
    [],
    [],
    [],
    [],
    [
      {
        "comments": "Front squat comment alpha",
        "movement": "Front Squat",
        "userID": "wDHZv3OL55SIymHkhMUejNleNkx1",
        "weight": "315"
      }
    ],
    [],
    [],
    [],
    [],
    [],
    []
  ]
  </code></pre>