error while calling api in ionic

Question

i am very very new in ionic and angular , i follow all the step that ionic provide at the blog to config api http://blog.ionic.io/10-minutes-with-ionic-2-calling-an-api/

after follow all the step when i try to console the result which is store in the variable that return undefined here is the code of provider:

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
@Injectable()
export class ApiServiceProvider {
   link = 'https://randomuser.me/api/';
   data :any;
   constructor(public http: Http) {
     console.log('Hello ApiServiceProvider Provider');

     this.load();
    }
load() {
    if (this.data) {
        return Promise.resolve(this.data);
    }
    return new Promise(resolve => {
        this.http.get(this.link)
            .map(res => res.json())
            .subscribe(data => {
                this.data = data.results;
                resolve(this.data);
            });
    });
  }
}

here is the code for page/home.ts

 import { Component } from '@angular/core';
 import { NavController ,ActionSheetController , AlertController } from 'ionic-angular';
 import { ResultPage } from '../result/result';
 import { ApiServiceProvider } from '../../providers/api-service/api-service';

 @Component({
   selector: 'page-home',
   templateUrl: 'home.html',
   providers: [ApiServiceProvider]
 })
  export class HomePage {
   users: any;
    constructor(public navCtrl: NavController, public alertCtrl:AlertController, public actionCtrl:ActionSheetController,public apiProvider:ApiServiceProvider) {
    this.getUsers();
   }
   getUsers() {
     this.apiProvider.load()
     .then(data => {
       this.users = data;
    });
   console.log(this.users);
 }

any help is appreciated. thanku

Fredrik Lundin Grande · Accepted Answer · 2017-09-03 19:12:45Z

1

The code inside load() is asynchronous, meaning it will take some time to complete. While that code is working, the next statement will to executed. In your case, the next statement is console.log(this.users).

This leads to console.log(this.users) being executed before load() is completed, and this.users will therefor be undefined.

Solve this by moving the console.log inside the then callback like this:

getUsers() {
  this.apiProvider.load()
    .then(data => {
      this.users = data;
      console.log(this.users);
    });
}

I recommend you to read up on how PROMISES in javascript works :)

edited Sep 3, 2017 at 19:12

answered Sep 3, 2017 at 18:59

Fredrik Lundin Grande

8,2561 gold badge32 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

sandeep Over a year ago

you are great thankx a lot , i spend 3 days on this and you just see that code and correct in just 1 attempt.. thanks a lot

Collectives™ on Stack Overflow

error while calling api in ionic

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related