angular2 http response setting to class variable

Question

I am making http call to fetch the data from the local json file. Due to lateness in receive the response, I am not able to display the response data on the template.

Service is making a HTTP call to fetch the data from json file.

export class DataBook {

  bookDetails: Array<Object>;

  constructor(public http: Http) {
      this.bookDetails = [];

  }

  makeDataReady(){
    this.http.get('assets/preloaded-data/booksummaries.json')
                  .map(res => res.json())
                  .subscribe(
                            data => this.bookDetails = data,
                            error => alert(error),
                            () => console.log(this.bookDetails) //output the json file content
                            );
  }

  appendBook(book:Object)
  {
    this.bookDetails.push(book);
  }

  getBooks():Array<Object>
  {
    return this.bookDetails;
  }


}

The below component is making call to initiate the http call.

export class ShowreviewPage {

  items: Object;

  ngOnInit(){
        this.items = this.dataBook.makeDataReady();
  }

  constructor(public navCtrl: NavController, public navParams: NavParams, public dataBook: DataBook) {
        this.items = this.dataBook.getBooks();

      }

  ionViewDidLoad() {
    console.log("ion View did Load",this.items); // empty array output
  }


}

I am new to Angular2. I am struggling to understand why there is a delay in the response?

Answer 1

I found the solution myself. I have just made the http call in the provider or service constructor after this.bookDetails = []; like

constructor(public http: Http) {
    this.bookDetails = [];
    this.init();

}


init(): void {
    this.http.get('assets/preloaded-data/booksummaries.json')
        .map(res => res.json())
        .subscribe(
            data => this.bookDetails = data,
            error => alert(error),
            () => console.log(this.bookDetails) //output the json file content
        );
}

It works fine. Anyway thanks folks!

Answer 2

It's not recommended to put Http calls in the constructor (see this for further information - Difference between Constructor and ngOnInit)

It shouldn't cause any spacial latency if you put it in the ngOnInit or ionViewDidLoad - try it.

Also, in your code sample the constructor appears second (after ngOnInit) - it won't cause error, but it's very non-standard.