CODEWITHSUNDEEP
angularionic2
smchae
smchae

Reputation: 1095

Ionic2 Returning a value from Http request and assign it to variable

I am new to Ionic2 and I don't really understand how asynchronous programming works.

I want function checkLogin() to return the value of 0 or 1, however, instead it returns the result below. How do I make the variable this.isLoggedInto be assigned the value I desire?

Any advice or suggestion would be appreciated.

Thank you in advance.

Provider

checkLogin() {
    var url = this.app.URL + 'api/program/information';
    var isLoggedIn;

    return this.http.get(url).map(res =>res.json()).subscribe( logininfo =>{
        if (!logininfo.data.information.is_logged_in) {
            isLoggedIn = 0;
        } else {
            isLoggedIn = 1;
        }
        return isLoggedIn;
    })
}

home.ts

ionViewWillEnter() {
    this.isLoggedIn = this.globalVar.checkLogin();
    console.log(this.isLoggedIn);
}

result enter image description here

Upvotes: 0

Views: 453

Answers (3)

Sagar Kulkarni
Sagar Kulkarni

Reputation: 2081

You can simply return an observable from checkLogin() and subscribe to it in home.ts. Like this:

checkLogin() {
  var url = this.app.URL + 'api/program/information';
  return this.http.get(url);
}

home.ts:

ionViewWillEnter() {
  this.globalVar.checkLogin()
  .map(res => res.json())
  .subscribe(logininfo => {
    if (!logininfo.data.information.is_logged_in) {
      this.isLoggedIn = 0;
    }
    else {
      this.isLoggedIn = 1;
    }
    console.log(this.isLoggedIn);
  },(err) => {
    console.log("Error occurred:",err);
  });
}

NOTE: All operations which are followed by this login information, will go in the .subscribe() of this.globalVar.checkLogin(). If you will try to access the this.isLoggedIn anywhere else than this, it might or might not be accessible. This is what an async operation is. You need to wait for it to get resolved. Other operations which are not dependent on this variable can carry forward outside of this function.

UPDATE 1: Shifting the if() part to a common method:

checkLogin() {
  var url = this.app.URL + 'api/program/information';
  return Observable.create(observer => {
    this.http.get(url)
    .map(res => res.json())
    .subscribe(logininfo => {
      var isLoggedIn;

      if(!logininfo.data.information.is_logged_in) {
        isLoggedIn = 0;
      }
      else {
        isLoggedIn = 1;
      }

      observer.next(isLoggedIn);
    },(err) => {
      console.log("Error occurred:",err);
      observer.error(err);
    });
  });
}

home.ts:

ionViewWillEnter() {
  this.globalVar.checkLogin()
  .subscribe(data => {
    this.isLoggedIn = data;
    console.log(this.isLoggedIn);
  },(err) => {
    console.log("Error occurred:",err);
  });
}

Upvotes: 1

Nakul Kundaliya
Nakul Kundaliya

Reputation: 542

you can use promise function for asynchronous operation.

checkLogin() {
    var url = this.app.URL + 'api/program/information';
    return new Promise((resolve, reject) => {
      this.http.get(url).map(res =>res.json()).subscribe( logininfo =>{
        if (!logininfo.data.information.is_logged_in) {
            resolve(0)
        } else {
            resolve(1)
        }
      },err=>{
        reject(err)
      })
    })
}

i hope its work for you.

Upvotes: 0

Suraj Rao
Suraj Rao

Reputation: 29614

You have subscribed in the provider. The subscribe function just returns a subscription and not the value. You should return the observable and subscribe in the component.

    checkLogin() {
    var url = this.app.URL + 'api/program/information';
    var isLoggedIn;

    return this.http.get(url).map(res =>{
        let logininfo = res.json();
        if (!logininfo.data.information.is_logged_in) {
            isLoggedIn = 0;
        } else {
            isLoggedIn = 1;
        }
        return isLoggedIn;
    })
}

In your component,

ionViewWillEnter() {
    this.globalVar.checkLogin().subscribe(val=>{
       this.isLoggedIn=val;
       console.log(this.isLoggedIn);
   })
}

In order to use do() or any other rxjs functions, you need to explicitely import them.

import 'rxjs/add/operator/do';

Upvotes: 0

Related Questions