Angular 8: Observable.subscribe Makes my user class empty

Question

I am new to Angular. I make a call to API

GetUserDetailsfromID(id:number):Observable<UserResponse> {
    let token = localStorage.getItem("userToken");        
    return this.http.get<UserResponse>(this.baseUrl + "Users/GetById/" + id, this.getOptions());
}

and form repository class I am making a call

GetUserDetailsfromID(id:number) {   
    this.dataSource.GetUserDetailsfromID(id).subscribe( x => {
           this.userresp = x;
           console.log(this.userresp);//**Here i am  able to view data**
         });
     var data = this.userresp; 
     console.log(data); //**but this becomes undefined always**
     return  this.userresp;
}

Can any body help please...

Does this answer your question? [Subscribe to observable is returning undefined](https://stackoverflow.com/questions/46769042/subscribe-to-observable-is-returning-undefined) — Roberto Zvjerković, Jan 09 '20 at 11:42
Does this answer your question? [Angular 8 How to get value from observable in ngOnInit and how do they behave](https://stackoverflow.com/questions/59650530/angular-8-how-to-get-value-from-observable-in-ngoninit-and-how-do-they-behave) — iY1NQ, Jan 09 '20 at 11:58

Ling Vu · Answer 1 · 2020-01-09T11:59:55.663

It is asynchronous, so you have to put it into the subscribe block. It is not possible to assign it outside of the block, since the subscription doesn't wait and it continues. That's why it is undefined.

GetUserDetailsfromID(id:number) {   
    this.dataSource.GetUserDetailsfromID(id).subscribe(x => {
        this.userresp = x;
        console.log(this.userresp);
        var data = this.userresp; 
    });
}

Usually async data is handled like this:

TS

GetUserDetailsfromID(id:number): Observable<any> {   
    return this.dataSource.GetUserDetailsfromID(id);
}

HTML

{{ GetUserDetailsfromID() | async }}

I highly recommend you to take a look at the introduction page of rxjs:

https://rxjs-dev.firebaseapp.com/guide/overview

score 1 · Answer 2 · answered Jan 09 '20 at 11:41

1

HttpCall is asynchronous, tou will get the result only after subscribing it, not outside the block

answered Jan 09 '20 at 11:41

Adrita Sharma

21,581
10
69
79

after subscribing too i get empty userresp class – Nikhil Jain Jan 09 '20 at 11:43

Developer · Answer 3 · 2020-01-09T11:55:17.670

0

Thats because of when this.userresp has loaded value is undefined and it called by first before any .subscribe() is called... so you have to put your code like this in completion stage of subscription...

GetUserDetailsfromID(id:number) {   
    this.dataSource.GetUserDetailsfromID(id).subscribe( x => {
            this.userresp = x;
            console.log(this.userresp);//**Here i am  able to view data**
         },

         (err) => {}, // Error Stage...

         () => {  // Completion stage is gets called when observable completes.
                  var data = this.userresp; 
                  console.log(data); //**but this becomes undefined always**
                  return  this.userresp;                 
          });
}

edited Jan 09 '20 at 11:55

answered Jan 09 '20 at 11:47

Developer

3,309
2
19
23

Thanks Gaurang.. but still i am not able to get data in my component from repository – Nikhil Jain Jan 09 '20 at 11:56
what is the use of `var data` ? – Developer Jan 09 '20 at 12:35
nothing just checking what i get will be consoled or not – Nikhil Jain Jan 09 '20 at 13:27

score 0 · Answer 4 · answered Jan 09 '20 at 13:26

Thanks Every One for posting your answers My Problem soled by below code

'

public GetUserDetailsfromID(id:number): Promise<any>
    {   
        return this.dataSource.GetUserDetailsfromID(id).toPromise();
    }

'

and in constructor i call like below

'

async getuserdata()
  {
    this.userid = localStorage.getItem("userid")

    this.data = await this.repo.GetUserDetailsfromID(Number(this.userid))
    this.user.Id = this.data["id"];
    this.user.FirstName = this.data["firstName"];
    this.user.LastName = this.data["lastName"];
    this.user.Username = this.data["username"];
    this.user.Mobilenumber = this.data["mobilenumber"];

    console.log(this.user);
  }

'

I dont know it this the best way but it solves my problem for now...

Thanks again for you valuable time

Regards,

This will block your thread. Later on when your application grows it will bring a bad user experience when the app stucks while loading. — Ling Vu, Jan 09 '20 at 13:51

Angular 8: Observable.subscribe Makes my user class empty

4 Answers4

I highly recommend you to take a look at the introduction page of rxjs: