ionic angular data binding error

Question

hello every one please am in the process of learning ionic am having aproblem to display my results of an api (last fm ) i console.log the data without any problem but when it comes to bind it it get errors here my template results.html

<ion-navbar  color="dark">
    <ion-title>results</ion-title>
  </ion-navbar>

</ion-header>


<ion-content  class="home">
    <ion-list>
      <ion-item text-wrap >
          {{artist | json}}
        <ion-avatar item-left>        </ion-avatar>
        <h2>
            {{artist.bio}}
        </h2>
      </ion-item>
    </ion-list>
  </ion-content>

here is my results.ts

    import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams,LoadingController } from 'ionic-angular';
import { MusicserviceProvider } from '../../providers/musicservice/musicservice';
import {Artist} from '../../pages/models/artist.interface';  

/**
 * Generated class for the ResultsPage page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-results',
  templateUrl: 'results.html',
})
export class ResultsPage {
 artistname:String;
 artist:Artist;
 loading:any;

  constructor(private musicservice:MusicserviceProvider,private navCtrl: NavController, private navParams: NavParams, private loadingCtrl :LoadingController) {
    this.loading = this.loadingCtrl.create({
      content: `
      <ion-spinner ></ion-spinner>`
    });


  }

getUserInformation():void {
  this.musicservice.getArtiseInfo(this.artistname).subscribe((data => this.artist = data));
  console.log(this.artist);

}


  ionViewDidLoad() {
  this.artistname = this.navParams.get('artistname');
  if(this.artistname)
  this.getUserInformation() ;
 }

}

and here is my services

import { Injectable } from '@angular/core';
import { Http ,Response } from '@angular/http';
import {Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
//import 'rxjs/add/operator/do';
import 'rxjs/add/Observable/of';
import 'rxjs/add/Observable/throw';

import {Artist} from '../../pages/models/artist.interface';  

@Injectable()
export class MusicserviceProvider {
  private base_url :String ="http://ws.audioscrobbler.com/2.0/?method=artist.getinfo&artist";
  private base_url2 :String ="api_key=b016b736378ec88dc30c36e4cc6e936b&format=json";

  constructor(private http: Http) {
    console.log('Hello MusicserviceProvider Provider');
  }

  getArtiseInfo(artist:String):Observable<Artist>{
    return this.http.get(`${this.base_url}=${artist}&${this.base_url2}`)
    //.do((data:Response)=> console.log(data))
    .map((data:Response) => data.json())
   // .do((data:Response)=> console.log(data))
    .catch((error:Response) =>Observable.throw(error.json().error || "server error")) 
  }
}

i get the results as i said the problem comes i the display so much .. thanks waiting

Answer 1

This happens because the view is loaded before the value is obtained from the http call.You have to wait for the data to come in before rendering the template.You can do this by

1. Declare a class boolean property

   private isDataAvailable:boolean=false;
   

2. Make this variable true once the data is available.

   getUserInformation(): void {
    this.musicservice.getArtiseInfo(this.artistname).subscribe((data => {
        this.artist = data;
        this.isDataAvailable = true;
   
    }));
    console.log(this.artist);
   
   }
   

3.Render the template only when the data is available;

<ion-content  class="home" *ngIf="isDataAvailable">
    <ion-list>
      <ion-item text-wrap > <!-- You can as well do *ngIf="artist?" here instead..-->
          {{artist | json}}
        <ion-avatar item-left>        </ion-avatar>
        <h2>
            {{artist.bio}}
        </h2>
      </ion-item>
    </ion-list>
  </ion-content>

You can as well use async pipe for the same.You can read about it here

Hope this helps.