Display specific data from TMDB-api call in Ionic

Question

I'm working on a app where the user search for a TV-show and from a api call to TMDB the user is supposed to see when the last episode of that TV-show was aired. I'm having trouble with displaying the last part - display the last aired episode.

Here's is my service (Series-Service), from which I get some information like the name, votes, simple overview. I also have a service to retrieve more information from the TV-shows ID.

    searchSeries(seriesName) {
    var url = 'http://api.themoviedb.org/3/search/tv?query=&query=' + encodeURI(seriesName) + '&api_key=[MY_API_KEY]';
    var response = this.http.get(url).map(res => res.json());
    return response;
}  
  moreInfo(seriesId)
  {
    var url = 'https://api.themoviedb.org/3/tv/'+seriesId+'?api_key=[MY_API_KEY]&language=en-US'
    var response = this.http.get(url).map(res => res.json());
    return response;
  }

Here is my page with the function to display the data (Series.ts):

      serie: {id};
      serieInfo: {};


      constructor(public navCtrl: NavController,
                  public navParams: NavParams,
                  public seriesService: SeriesService,
                  public alertCtrl: AlertController) {
//Get the serie object I picked in my search
        this.serie = navParams.get('serie');

//Use the ID of that object to use my other service to get more info
        console.log(this.serie.id);
        this.seriesService.moreInfo(this.serie.id).subscribe(
          data => {
            this.serieInfo = data.results;
            console.log(data);
          },
          err => {
            console.log(err);
          },
          () => console.log('Series Search Complete')
        );

      }

My HTML page for displaying the TV-show (Series.html):

<ion-content padding>
  <div *ngIf="serie" class="selection">
    <ion-card>
      <ion-item>
        <ion-avatar item-left image-large>
          <img src="https://image.tmdb.org/t/p/w92{{serie.poster_path}}"/>
        </ion-avatar>
        <h1>{{serie.name}}</h1>
        <p>{{serie.first_air_date}}</p>
      </ion-item>

      <ion-item>
        <ion-icon name="document" item-left></ion-icon>
        <h2>Overview</h2>
        <p class="item-description">{{serie.overview}}</p>
      </ion-item>
      <ion-item>
        <ion-icon name="bookmark" item-left></ion-icon>
        <h2>Average Vote</h2>
        <p>{{serie.vote_average}}</p>
      </ion-item>
      <ion-item>
        <ion-icon name="bookmark" item-left></ion-icon>
        <h2>Air date</h2>
        <p>{{serie.last_air_date}}</p>
      </ion-item>
      <ion-row>
        <ion-col text-right>
          <button
          ion-button
          clear
          small
          (click)="onAddToFavorites(serie)">Favorite</button>
        </ion-col>
      </ion-row>
    </ion-card>
  </div>
</ion-content>

My Search function (Search.ts):

  searchForSeries(event, key) {
    if(event.target.value.length > 2) {
      this.seriesService.searchSeries(event.target.value).subscribe(
        data => {
          this.series = data.results;
          console.log(data);
        },
        err => {
          console.log(err);
        },
        () => console.log('Series Search Complete')
      );
    }
  }

  selectSeries(event, serie) {
    console.log(serie);
    this.navCtrl.push(Series, {
      serie: serie
    });
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad Search');
  }

As said, I can see the information from my first service call in the app, but in the console log I can see information from both api calls. Why can't I display data from the second api call?

Here's a picture of how it looks: https://i.sstatic.net/4Sftl.jpg

What I think is wrong is in my Series.ts, which I want to be looking like:

/*****************Don't pass id in {} *****************/
    serie: {};
      serieInfo: {};


      constructor(public navCtrl: NavController,
                  public navParams: NavParams,
                  public seriesService: SeriesService,
                  public alertCtrl: AlertController) {
        this.serie = navParams.get('serie');

        console.log(this.serie.id);
/******* BUT THEN THIS ID GETS MAD AND SAYS:
"Property 'id' does not exist on type '{}'."**********/
        this.seriesService.moreInfo(this.serie.id).subscribe(
          data => {
            this.serieInfo = data.results;
            console.log(data);
          },
          err => {
            console.log(err);
          },
          () => console.log('Series Search Complete')
        );

      }

Why can I see the object in my console log but not display it in my Series.html?

Answer 1

Solved it! Instead of sending an entire object of serie, I just pass the id of the serie.

Search.html:

<ion-content padding>
  <ion-item>
    <ion-label color="primary" stacked>Search for a TV-show</ion-label>
    <ion-input type="text" (input)="searchForSeries($event, searchKey)"></ion-input>
  </ion-item>

  <ion-list>
    <ion-item *ngFor="let serie of series" (click)="selectSeries($event, serie.id)">
      <ion-avatar item-left>
        <img src="https://image.tmdb.org/t/p/w92{{serie.poster_path}}"/>
      </ion-avatar>
      <h2>{{serie.original_name}}</h2>
      <p class="item-description">{{serie.overview}}</p>
    </ion-item>
  </ion-list>
</ion-content>

Search.ts:

  selectSeries(event, id) {
    console.log(id);
    this.navCtrl.push(Series, {
      id
    });
  }

Series.ts:

serie: {};


  constructor(public navCtrl: NavController,
              public navParams: NavParams,
              public seriesService: SeriesService,
              public alertCtrl: AlertController) {
    this.serie = navParams.get('serie');
    this.seriesService.moreInfo(this.navParams.get('id')).subscribe((params) => {
      let id = params['id'];
      this.seriesService.moreInfo(id).subscribe(serie => {
        console.log(serie);
        this.serie = serie;
      })
    });