Angular 8 Http Post get boolean value from subscribe

Question

I've tried to get value out from subscribe of boolean true/false but i can't get value out, here is what i used so far.

My Old method for http post.

this.http.post(HostedPathConst.HostedPath + `CompanyProfile/UpdateCustomersStatus`, fData)
.subscribe(data => this.Success(data), err => this.Error(err));

this.Success(data) and this.Error(err) are methods being called now, the new way i tried to get data out is this.

const fData = new FormData();
fData.append('Id', Id.toString());    
fData.append('IsActive', IsActive.toString());
const test = this.http.post(HostedPathConst.HostedPath + `CompanyProfile/UpdateCustomersStatus`, fData)
  .subscribe(data => {
    this.Success(data);
    this.Switch = IsActive;
    return this.Switch;
  },
    err => {
      this.Error(err);
      this.Switch = !IsActive;
      return this.Switch;
    });
    console.log(test);//Subscriber {closed: false, _parentOrParents: null, _subscriptions: Array(1), syncErrorValue: null, syncErrorThrown: false, …}
    console.log(this.Switch);//undefined at first then gives opposite result like true gives false and vice versa

As this.Switch = IsActive; the boolean value to get data out it returns undefined at first then after wards it returns value false instead of true and vice versa.

I don't really get the problem here, so I understand that the response from the server where you are doing the post returns a bool, but that means that It works properly and you can get a response from the server. — Erik, Aug 24 '20 at 18:34
@Erik my boolean value is a checkbox if checked it returns true else false but in first scenario it returns undefined then opposite value if i checked its false and unchecked its true on the console.log — , Aug 24 '20 at 18:42
Well, one thing is sure. Http operations are asynchronous so in execution time It's possible that, this console.log(this.Switch); will happen before this, this.Switch = IsActive; So maybe, this is the reason you are getting undefined. — Erik, Aug 24 '20 at 19:07
@Erik how do i use synchronous an example would be helpful .. ? — , Aug 24 '20 at 19:12

Erik · Answer 1 · 2020-08-31T12:56:16.173

Because I'm understanding that your problem is because async stuff, I'm going to write here an explanation. To explain it simple, you don't know when async operations are going to end. For example, when you do a http function you are communicating with a server, so you don't know when the server is going to answer (because of slow connection, high traffic, or maybe because you ask for a heavy operation).

To fix this problem we use the subscribe() method which use the observer pattern. So, the point here, is because you don't know when the server or the operation (like threads) are going to finish you subscribe to it and keep watching for any change or answer. When you receive it, the code inside the subscribe executes.

You can learn more about the observer pattern here: https://en.wikipedia.org/wiki/Observer_pattern#:~:text=The%20observer%20pattern%20is%20a,calling%20one%20of%20their%20methods. and async theory here: https://en.wikipedia.org/wiki/Asynchrony_(computer_programming)

And for your problem, you can init the value as false, and set the checkbox value as [(ngModel)]="Switch" so when switch var gets updated the checkbox will update too!

Nav Kumar V · Answer 2 · 2020-08-25T01:21:24.067

0

Since its an observable you won't get the response immediately. So console log this.Switch inside the success and error block. Try below snippet

const fData = new FormData();
fData.append('Id', Id.toString());    
fData.append('IsActive', IsActive.toString());
const test = this.http.post(HostedPathConst.HostedPath + `CompanyProfile/UpdateCustomersStatus`, fData)
  .subscribe(data => {
    this.Success(data);
    this.Switch = IsActive;
    console.log("Success", this.Switch);
    return this.Switch;
  },
    err => {
      this.Error(err);
      this.Switch = !IsActive;
      console.log("Error", this.Switch);
      return this.Switch;
    });

I am not sure if this will solve your issue, but definitely it will be helpful to debug to get your solution.

Note: And the reason for u getting undefined at first then gives opposite result like true gives false and vice versa is that you are consoling this.Switch outside the success or error block which will mostly return undefined for first and any pre-assigned values next. Since this.Switch is global scope variable.

edited Aug 25 '20 at 01:21

answered Aug 25 '20 at 01:11

Nav Kumar V

320
2
10

as i test using console.log(test);//Subscriber {closed: false, _parentOrParents: null, _subscriptions: Array(1), syncErrorValue: null, syncErrorThrown: false, …} console.log(this.Switch); // gives undefined at first – Aug 25 '20 at 20:47
how do i get the return value out from the subscribe of "return this.switch" value boolean True/False.. ? – Aug 25 '20 at 20:48
I just want to get the value out from subscribe in boolean True or False .. – Aug 25 '20 at 20:49
Sorry but, I presume, that you have not debugged the snippet that I have provided above. See instead of returning the value of `this.Switch` into the variable `test` why can't you directly use the value of `this.Switch` since its a global scope. But for some reason you still need the `subscription value` to be assigned to the `test`, then please refer to this link https://stackoverflow.com/questions/59448263/async-pipe-with-rxjs?rq=1 **Note: ** The value assigned to `test` will still be of type `Subscription` but not `Boolean` – Nav Kumar V Aug 27 '20 at 08:09
Answered my own question below and got the expected result. – Aug 29 '20 at 20:57

Angular 8 Http Post get boolean value from subscribe

2 Answers2