title: Angular 2 Display specific index of array
body: <p>I'm trying to display/loop a variable(s) in an array by using the following piece of code.</p>
  
  <pre><code>&lt;tr *ngFor="let ep of theshow.episodes[0]"&gt;
  </code></pre>
  
  <p>Unfortunately looks like angular does not allow me to do this, is there a way I would be able to only show the array inside the array with index 0?</p>
  
  <p>Fyi: This is my first tryout personal project to learn angular 2, so if you see anything else that might be done in a better way, please do tell.</p>
  
  <p>The data in "theshow" variable is the following (google chrome inspector copy/paste)</p>
  
  <pre><code>Object
    name: "game of thrones"
    airtime: "21:00"
    id: 82
    episodes: Array[7]    //each array contains a season
      0: Array[10]    //each season contains all there episodes (this is season 1)
          0: Object   //episode 1
              name: "Winter is coming"
              ...
          1: Object   //episode 2
              name: "The Kingsroad"
              ...
          2: Object   //episode 3
              name: "Lord Snow"
              ...
      1: Array[10] //season 2
          0: Object   //episode 11
              name: "The North Remembers"
              ...
          1: Object   //episode 12
              name: "The Night Lands"
              ...
          2: Object   //episode 13
              name: "What is Dead May Never Die"
              ...
      ...
  </code></pre>
  
  <p>this is the full piece of code I try to run is.</p>
  
  <pre><code>&lt;tr *ngFor="let ep of theshow.episodes[0]"&gt;
    &lt;td class="mailbox-name"&gt;{{ep.name}}&lt;/td&gt;
    &lt;td class="mailbox-subject"&gt;{{ep.airdate}}&lt;/td&gt;
    &lt;td class="mailbox-date"&gt;{{ep.airtime}}&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>Error message I receive is:</p>
  
  <pre><code>Uncaught (in promise): Error: Error in ./SearchComponent class    SearchComponent - inline template:69:22 caused by: Cannot read property '0' of undefined
  TypeError: Cannot read property '0' of undefined
  at _View_SearchComponent2.detectChangesInternal (/AppModule/SearchComponent/component.ngfactory.js:555:61)
  at _View_SearchComponent2.AppView.detectChanges (http://127.0.0.1:4200/main.bundle.js:56393:14)
  at _View_SearchComponent2.DebugAppView.detectChanges (http://127.0.0.1:4200/main.bundle.js:56498:44)
  at _View_SearchComponent0.AppView.detectContentChildrenChanges (http://127.0.0.1:4200/main.bundle.js:56411:19)
  at _View_SearchComponent0.detectChangesInternal (/AppModule/SearchComponent/component.ngfactory.js:81:8)
  at _View_SearchComponent0.AppView.detectChanges (http://127.0.0.1:4200/main.bundle.js:56393:14)
  at _View_SearchComponent0.DebugAppView.detectChanges (http://127.0.0.1:4200/main.bundle.js:56498:44)
  at _View_SearchComponent_Host0.AppView.detectViewChildrenChanges (http://127.0.0.1:4200/main.bundle.js:56419:19)
  at _View_SearchComponent_Host0.detectChangesInternal (/AppModule/SearchComponent/host.ngfactory.js:33:8)
  at _View_SearchComponent_Host0.AppView.detectChanges (http://127.0.0.1:4200/main.bundle.js:56393:14)
  </code></pre>
  
  <p>serie.service.ts</p>
  
  <pre><code>import { Injectable, Input } from '@angular/core';
  import { Http, Response, RequestOptions, Headers } from '@angular/http';
  import 'rxjs/add/operator/map';
  
  @Injectable()
  export class SerieService {
    url = "//api.tvmaze.com/search/shows?q=";
  
    getSerie(id){
      this.url = "http://api.tvmaze.com/shows/"+ id +"?embed=episodes";
      var re = '';
      return this._http.get(this.url).map(this.cleanSerieData);
    }
  
    private cleanSerieData(res: Response){
      let body = res.json();
      var tmp = [];
      body._embedded.episodes.forEach(el =&gt; {
        if(tmp[el.season-1] == undefined){
          tmp[el.season-1] = [];
        }
        tmp[el.season-1].push(el);
      });
      var clean = {
        id: body.id,
        name: body.name,
        rating: body.rating.average,
        airday: body.schedule.days,
        airtime: body.schedule.time,
        status: body.status,
        summary: body.summary,
        episodes:tmp,
        countSeasons: tmp.length,
        countEpisodes: body._embedded.episodes.length
      };
      return clean;
    }
  
    constructor(private _http:Http) { }
  
  }
  </code></pre>
  
  <p>Search.component.ts</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { SerieService } from './../serie.service';
  import { Router, ActivatedRoute, Params } from '@angular/router';
  
  @Component({
    selector: 'app-search',
    templateUrl: './search.component.html',
    styleUrls: ['./search.component.css']
  })
  export class SearchComponent implements OnInit {
    srh = '';
    shows = [];
    tmp = [];
    id = undefined;
    theshow = {};
  
    search(event:any){
      this.srh = event.target.value;
  
      this.serieService.getSeries(this.srh)
        .subscribe(res =&gt; {
          console.log(res);
          this.shows = res;
        })
    }
  
    constructor(
      private serieService: SerieService,
      private route: ActivatedRoute,
      private router: Router
    ) { }
  
    ngOnInit() {
      this.id = this.route.snapshot.params['id'];
      this.searchFunction();
    }
  
  
  
    searchFunction()
    {
      if(this.id == undefined)
      {
        console.log('search functie');
      }else{
        this.serieService.getSerie(this.id).subscribe(res =&gt; {
          console.log(res);
          this.theshow = res;
          console.log(res.episodes[0])
        });
      }
    }
  
  }
  </code></pre>
  
  <p>Edit, added code.</p>
  
  <p>Eventually the idea is that I can click on season 2 (button) and get all the episodes of season 2 by changing  to  (using a variable ofc)</p>
  
  <p>Many thanks for your response.</p>