How to assign a value to variable inside subscription?

Question

I have Ionic 4 angular project, I need to assign value while reading inside subscribe. However I could not do that. I know there are several Questions and Answers related to mine. However none of them is working for me. Here is the my code and I tried so far. Any comments, any help is appriciated. Thank you very much.`

Service.ts

  public loggedChecker: any;
  private lofff = new Subject<any>();

    postLoginToServer (password, email) {
    var headers = new Headers();
    headers.append("Accept", 'application/json');
    headers.append('Content-Type', 'application/json' );
    let postData =  {
     password: password,
     mail: email
 }
 console.log("8888888888888888888888888888888");

    this.http.post("http://localhost:8080/api/login", postData, { observe: 'response'} )
      .pipe(map(data =>  this.loggedChecker =(data.body)));

      console.log(this.loggedChecker,"0330303333333333"); //undefined

      return this.loggedChecker+"";
}

And here is the another I try

  postLoginToServer (password, email) {
    var headers = new Headers();
    headers.append("Accept", 'application/json');
    headers.append('Content-Type', 'application/json' );
    let postData =  {
     password: password,
     mail: email
 }
    this.http.post("http://localhost:8080/api/login", postData,{observe: 'response'})
      .subscribe(data => {
         
        this.loggedChecker =(data.body);
        
        this.textToDisplay = (data.body);
        this.lofff.next(data);
       }, error => {
        console.log(error);
      });

    console.log(this.lofff,"logged checker");
    
    return this.loggedChecker+"";
    }

Here is the page.ts

Page.ts

 logForm(){    
   
   console.log(this.fineService.postLoginToServer(this.passwordUser, this.email));
}

Both of them are not working. Thank you.

So you're not able to see the data when you use the second code? — Ramesh Reddy
– Ramesh Reddy, Commented Mar 5, 2020 at 10:36
this.loggedChecker =(data.body) in this way, I editted question sorry, I made lots of changes, I forget to put there — ozer
– ozer, Commented Mar 5, 2020 at 10:37
when it's assigned you cannot return it inside the subscribe block or in the function as you did in the 1st code block. You should return this.http.post("http://localhost:8080/api/post", postData,{observe: 'response'}) and then subscribe to it wherever you want. — Ramesh Reddy
– Ramesh Reddy, Commented Mar 5, 2020 at 10:41

Laminoo Lawrance · Accepted Answer · 2020-03-05 11:13:00Z

2

Since it's a callback function while calling the post request and since JS is non blocking. below lines will be excuted without waiting for the subscribe function call. hence you are getting undefined.

try console logging inside subscribe function or make the service function as async for your flow to wait until request is processed.

edited Mar 5, 2020 at 11:13

answered Mar 5, 2020 at 10:53

Laminoo Lawrance

4252 silver badges8 bronze badges

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

2 Comments

ozer Over a year ago

I am trying to pass this value to the page.ts, thats why I need this

Laminoo Lawrance Over a year ago

then try getting loff subject from this service and subscribe to "lofff" subject from page.ts. in service function log it try this.lofff.subscribe(data -> console.log("logged checker"));

Ramesh Reddy · Accepted Answer · 2020-03-06 07:46:37Z

1

From what I understand you are trying to assign a class property named loggedChecker. This is what you should do:

  postLoginToServer (password, email) {
    var headers = new Headers();
    headers.append("Accept", 'application/json');
    headers.append('Content-Type', 'application/json' );
    let postData =  {
     password: password,
     mail: email
    }
    this.http.post("http://localhost:8080/api/login", postData,{observe: 'response'})
      .pipe(tap(data => {
        this.loggedChecker =(data.body);
        this.textToDisplay = (data.body);
        this.lofff.next(data);
       }, error => {
        console.log(error);
      }));
    }

tap(import from rxjs) operator will not change the data but can be used to do things like what you're trying to do.

UPDATE: You should change your logForm function.

 logForm(){    
   console.log(this.fineService.postLoginToServer(this.passwordUser, this.email));
}

should be

     logForm(){    
       this.fineService.postLoginToServer(this.passwordUser, this.email).subscribe(data => {
        console.log(data);
       })
    }

because the HTTP request will return an observable and you will get its value when you subscribe to it.

edited Mar 6, 2020 at 7:46

answered Mar 5, 2020 at 10:51

Ramesh Reddy

10.7k3 gold badges22 silver badges38 bronze badges

8 Comments

ozer Over a year ago

It still print undefined.

Ramesh Reddy Over a year ago

where are you calling postLoginToServer? where are you printing the result? Note that since this is asynchronous if you try to print the value before you get the response it will be undefined.

ozer Over a year ago

I am calling it from page.ts

Ramesh Reddy Over a year ago

Update the question...add page.ts to it

ozer Over a year ago

I did, I added the page.ts

|

Collectives™ on Stack Overflow

How to assign a value to variable inside subscription?

Service.ts

Page.ts

2 Answers 2

2 Comments

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Service.ts

Page.ts

2 Answers 2

2 Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related