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

Question

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

Sagar Kulkarni · Accepted Answer · 2017-04-11 07:46:02Z

1

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);
  });
}

edited Apr 11, 2017 at 7:46

answered Apr 11, 2017 at 6:40

Sagar Kulkarni

2,0812 gold badges18 silver badges25 bronze badges

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

3 Comments

smchae Over a year ago

Thank you for suggestion. The reason that I want to return simple value is that I have checkLogin() every tab, so I do not want to repeat subscribe part everytime. Is there any way I can return simple value such as 0 or 1?

Sagar Kulkarni Over a year ago

Hey. For that I tried some things. At max you can shift your logic of isLoggedIn to the common checkLogin() method. But, .subscribe() will not have any alternative from a calling method Will update my answer for that.

Sagar Kulkarni Over a year ago

Updated my answer. Also, since this is async, I think this is how you will have to wait for the event to get completed.

Suraj Rao · Accepted Answer · 2017-04-11 06:13:07Z

0

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';

edited Apr 11, 2017 at 6:13

answered Apr 11, 2017 at 5:31

Suraj Rao

29.7k11 gold badges96 silver badges104 bronze badges

3 Comments

Suraj Rao Over a year ago

updated answer.. just import in provider import 'rxjs/add/operator/do';

smchae Over a year ago

Thank you! it works. But val returns response result of http request instead of 0 or 1 which I expect.

Suraj Rao Over a year ago

oh ok.. github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/… it seems it is used mainly for logging.. will update answer..do it in map itself

Nakul Kundaliya · Accepted Answer · 2017-04-11 06:40:01Z

0

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.

answered Apr 11, 2017 at 6:40

Nakul Kundaliya

5422 silver badges12 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

3 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related