Categories
angular asynchronous javascript observable typescript

How do I return the response from an Observable/http/async call in angular?

130

I have service which returns an observable which does an http request to my server and gets the data. I want to use this data but I always end up getting undefined. What’s the problem?

Service:

@Injectable()
export class EventService {

  constructor(private http: Http) { }

  getEventList(): Observable<any>{
    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });

    return this.http.get("http://localhost:9999/events/get", options)
                .map((res)=> res.json())
                .catch((err)=> err)
  }
}

Component:

@Component({...})
export class EventComponent {

  myEvents: any;

  constructor( private es: EventService ) { }

  ngOnInit(){
    this.es.getEventList()
        .subscribe((response)=>{
            this.myEvents = response;
        });

    console.log(this.myEvents); //This prints undefined!
  }
}

I checked How do I return the response from an asynchronous call? post but couldn’t find a solution

6

  • 4

    that would be a good point to emphasize on the fact it is not possible to transform an asychronous operation to a synchrnous-one.

    – n00dl3

    Apr 14, 2017 at 13:30

  • 1

    @n00dl3 Thanks for the tip! I’ve tried to explain in the “What you shouldn’t do:” section. Feel free to edit it.

    – eko

    Apr 14, 2017 at 18:08

  • 1

    Does this answer your question? How do I return the response from an asynchronous call?

    Apr 24, 2020 at 16:53

  • 1

    @HereticMonkey that post is already credited in the answer

    – eko

    Apr 24, 2020 at 17:32

  • 2

    @HereticMonkey yes it does, because it’s framework specific, it’s observables. When I duplicated angular/rxjs, async questions with that answer, people got confused and said thening the observable doesn’t work; this is obvious for angular answerers but not to you apparently. Also i thought it was enough to give the credit in the answer but i will change the question as well then.

    – eko

    Apr 24, 2020 at 17:40


132

Reason:

The reason that it’s undefined is that you are making an asynchronous operation. Meaning it’ll take some time to complete the getEventList method (depending mostly on your network speed).

So lets look at the http call.

this.es.getEventList()

After you actually make (“fire”) your http request with subscribe you will be waiting for the response. While waiting, javascript will execute the lines below this code and if it encounters synchronous assignments/operations it’ll execute them immediately.

So after subscribing to the getEventList() and waiting for the response,

console.log(this.myEvents);

line will be executed immediately. And the value of it is undefined before the response arrives from the server (or to whatever that you have initialized it in the first place).

It is similar to doing:

ngOnInit(){
    setTimeout(()=>{
        this.myEvents = response;
    }, 5000);

    console.log(this.myEvents); //This prints undefined!
}


Solution:

So how do we overcome this problem? We will use the callback function which is the subscribe method. Because when the data arrives from the server it’ll be inside the subscribe with the response.

So changing the code to:

this.es.getEventList()
    .subscribe((response)=>{
        this.myEvents = response;
        console.log(this.myEvents); //<-- not undefined anymore
    });

will print the response.. after some time.


What you should do:

There might be lots of things to do with your response other than just logging it; you should do all these operations inside the callback (inside the subscribe function), when the data arrives.

Another thing to mention is that if you come from a Promise background, the then callback corresponds to subscribe with observables.


What you shouldn’t do:

You shouldn’t try to change an async operation to a sync operation (not that you can). One of the reasons that we have async operations is to not make the user wait for an operation to complete while they can do other things in that time period. Suppose that one of your async operations takes 3 minutes to complete, if we didn’t have the async operations the interface would froze for 3 minutes.


Suggested Reading:

The original credit to this answer goes to: How do I return the response from an asynchronous call?

But with the angular2 release we were introduced to typescript and observables so this answer hopefully covers the basics of handling an asynchronous request with observables.

3

  • 5

    When a question is answered by the questioner at the exact same time of the post.. This is a good place to stop and write a blog post instead

    Dec 21, 2018 at 23:39

  • 7

    @JonasPraem True, but there is nothing wrong in sharing the knowledge on Stackoverflow. As you see the number of votes, it did help many people here and it will continue to do so.

    Dec 23, 2018 at 15:33

  • 2

    My question was somewhat similar. But this answer solved that too. 🙂

    – Tanzeel

    Aug 22, 2020 at 12:19

15

Making a http call in angular/javascript is asynchronous operation.
So when you make http call it will assign new thread to finish this call and start execution next line with another thread.
That is why you are getting undefined value.
so make below change to resolve this

this.es.getEventList()  
      .subscribe((response)=>{  
       this.myEvents = response;  
        console.log(this.myEvents); //<-this become synchronous now  
    });

0

    7

    You can use asyncPipe if you use myEvents only in template.

    Here example with asyncPipe and Angular4 HttpClient example

    2

    • 1

      And (!) with this implementation one doesn’t need to unsubscribe the Subscription: medium.com/@sub.metu/…

      Dec 2, 2018 at 17:27


    • @SanJayFalcon Since this is a http request, there is no need for unsubscription.

      – AT82

      Apr 22, 2019 at 10:36