Angular shows undefined when showing data from observable

Question

Sorry for that bad title. I am getting data from api with httpclient and when I console.log that data inside of a subscribe everything works fine, but when I do: this.launches = data and then try to console.log that what I see is "Undefined" in the console

console o/p

    launches:LaunchRootObject;

    showLaunches(){
    this.client.GetAllLauches().subscribe((data:LaunchRootObject) =>{
      console.log(data); //this is working
      this.launches = data;
    });
    }

    ngOnInit(): void {
    this.showLaunches();
    console.log(this.launches)  //this shows "Undefined"
  }

This is a part of a http service:

    GetAllLauches(){
    return this.http.get<LaunchRootObject>(this.base_url + 'launch');
  }

The problem is the first variable works great but something happens when calling the second console.log, the second one shows undefined — Arek123113, Jun 30 '20 at 15:04
Does this answer your question? [How do I return the response from an Observable/http/async call in angular?](https://stackoverflow.com/questions/43055706/how-do-i-return-the-response-from-an-observable-http-async-call-in-angular) — R. Richards, Jun 30 '20 at 15:14

ukn · Answer 1 · 2020-06-30T15:20:20.790

0

Its async, ngOnInit is executed before showLaunches(). What happens is:

ngOnInit() is called by angular
this.showLaunches() is called by ngOnInit
this.client.GetAllLauches() is called (not completed)
console.log(this.launches) is called but the http as not been completed yet which is why you see undefined
this.client.GetAllLauches() completes and get in your subscribe
console.log(data); works
this.launches is now being assigned but its too late

You could use something like this if you want to print the data from the onInit when its available:

    const subscription: new Subscription();
            
    ngOnInit(): void { 
        this.subscription.add(this.client.GetAllLauches()
            .subscribe((data:LaunchRootObject) => { 
                console.log(data); //this is working
                    this.launches = data;
                })
            })
    }

edited Jun 30 '20 at 15:20

answered Jun 30 '20 at 15:03

ukn

1,723
1
14
24

Thank you for response. Have you got any idea what to do to make that data console.log when is ready to go? – Arek123113 Jun 30 '20 at 15:08
you can use a subscription and add your service from the onInit instead of calling showLauches() – ukn Jun 30 '20 at 15:11
Thank you I realy appreciate your answer – Arek123113 Jun 30 '20 at 15:14

score 0 · Answer 2 · answered Jun 30 '20 at 15:03

Subscriptions are used to handle async method call. Thus, the code inside the subscribe() method is executed only when the async method return its result (in your case http call).

While waiting for the async response, the program continues and execute the console.log(this.launches).

That's why your console.log(this.launches) is executed before your console.log(data) and before subscribe method callback this.launches is undefined.

Angular shows undefined when showing data from observable

2 Answers2