title: Accessing nested arrays from an API in Ionic
body: <p>I am currently making an application that is meant to access data from an API in order to display information on a list. The data is structured as an array where each entry also has its own array that displays entries, what I'm currently trying to figure out is how to display each primary entry in a list and access the secondary entries in order to modify the point values in them so that they're within a certain value.</p>
  <p>Here's what the interface for the API looks like</p>
  <pre><code>export interface RankingAPI {
      [x: string]: any;
      data: Data[];
  }
  
  export interface Data {
      points:   number;
      detail:   Detail[];
      userId:    number;
      firstName: string;
      lastName:  string;
      maxHr:     number;
  }
  
  export interface Detail {
      points:      number;
      workoutDate: Date;
  }
  </code></pre>
  <p>And what the main Typescript file looks like</p>
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  import { RankingAPI } from &quot;./rankingApi_interface&quot;;
  
  
  @Component({
      selector: 'ranking',
      templateUrl: 'ranking.html'
  })
  export class RankList implements OnInit {
      public theTodo: RankingAPI;
      private _apiURL = '(api url being used)';
      constructor(
          private http: HttpClient
      ) {}
      ngOnInit(){
          this.http.get(this._apiURL).subscribe((data: RankingAPI) =&gt; {
              this.theTodo = data ;
              
              this.theTodo.data.forEach(item =&gt; {
                  if (item.points == undefined) {
                      item.points = 0;
                  }
              })
              
              console.log(this.theTodo.data);
          }) ;
      }
  }
  </code></pre>
  <p>Also having issues with displaying the entries onto the html page, it looks like this currently</p>
  <pre><code>&lt;ion-header&gt;
      &lt;ion-navbar&gt;
        &lt;button ion-button menuToggle&gt;
          &lt;ion-icon name=&quot;menu&quot;&gt;&lt;/ion-icon&gt;
        &lt;/button&gt;
        &lt;ion-title&gt;Ranking List&lt;/ion-title&gt;
      &lt;/ion-navbar&gt;
    &lt;/ion-header&gt;
  
    &lt;ion-content&gt;
      &lt;ion-list&gt;
        &lt;ion-item *ngFor=&quot;let item of data&quot;&gt;
          {{item.userId}}
        &lt;/ion-item&gt;
      &lt;/ion-list&gt;
    &lt;/ion-content&gt;
  </code></pre>
  <p>EDIT: Here's what it looks like when the line was changed to &quot;let item of theTodo.data&quot;</p>
  <p><a href="https://i.stack.imgur.com/IFFna.jpg" rel="nofollow noreferrer">Console Screenshot</a></p>
  <p><a href="https://i.stack.imgur.com/rR2bV.png" rel="nofollow noreferrer">Screenshot of page</a></p>