Angular 2 observable not assigning returned object to variable

Question

     getEmployee(id : number) : void{
       var e : Employee;
       this.http.get(this.employeesUrl + '/' + id)
       .map(response => <Employee>response.json())
       .subscribe((res) =>{e = res},
                          (err)=>console.log(err),
                          ()=>console.log("Done"));

     console.log(e.Name);  

}

This res that is returned on doing console.log(res) prints the employee object correctly. But when i try to assign it to a variable it gives me a page long error. Although it does print Done at the end. Have spent 3 hrs. on these and have gone through lot of SO posts but can't figure it out

Possible duplicate of [How do I return the response from an asynchronous call?](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — jonrsharpe, Nov 13 '16 at 16:00

eko · Accepted Answer · 2016-11-13T16:10:49.470

If you log the response like

   var e : Employee;
   this.http.get(this.employeesUrl + '/' + id)
   .map(response => <Employee>response.json())
   .subscribe((res) =>{e = res},
                      (err)=>console.log(err),
                      ()=>console.log("Done"));

 console.log(e.Name);

Of course you will see a blank/error status since the above code(this.http.get) is async. Meaning you are making a request then you are waiting for the response inside subscribe and when it comes, you will assign e to res or print whatever you want. While waiting you are already logging(e.Name). And since "e" is initially undefined, e.Name is an error.

Instead try this and check the log,

   var e : Employee;
   this.http.get(this.employeesUrl + '/' + id)
   .map(response => <Employee>response.json())
   .subscribe((res) =>{
               e = res;
               console.log(e.Name); 
               },
              (err)=>console.log(err),
              ()=>console.log("Done"));

What you should do:

Let this method return an observable and lets say the components name is GetEmployeeService,

getEmployee(id : number) : Observable<Employee>{
       return this.http.get(this.employeesUrl + '/' + id)
       .map(response => <Employee>response.json())

}

and subscribe to this observable wherever(in the class that calls this service) you want to use it

constructor(..., private myService: getEmployeeService)

...
//the place where you need the response
this.myService.subscribe((res)={
   console.log(res);
   //do something with res here
   this.field = res;
})

it is working but then how do I return this object to the class that calls this service ??? — Mohit Shah, Nov 13 '16 at 16:04
@mohit the setup is incorrect really you shouldn't subscribe to this observable here. I will update my answer — eko, Nov 13 '16 at 16:07

Angular 2 observable not assigning returned object to variable

1 Answers1