unable to use fetched data outside subscribe() method in angular 6

Question

I am fetching an object from node server using a angular 6 service.

getMasterObj () {

   this.http.get(this.url1).subscribe(
        (data) =>{
        this.masterChartObj1 = data;
        console.log(this.masterChartObj1) // data is getting printed
    })
        console.log(this.masterChartObj1) // undefined

}

In same classs I have defined an object as

public masterChartObj1;

I am initializing that object with the data received in subscribe method. as checked in console.log it is printed but same is undefined outside subscriber method.

I have tried same in another way also, but still same output.

 getMasterObj () {
       let parent_scope = this;
       this.http.get(this.url1).subscribe(
            (data) =>{
            parent_scope.masterChartObj1 = data;
            console.log(parent_scope.masterChartObj1) // data is getting printed
        })
            console.log(this.masterChartObj1) // undefined

    }

Please let me know, if I am doing anything wrong...

look for async vs sync..... – Ritwick Dey May 24 '18 at 09:41 — Ritwick Dey, May 24 '18 at 09:41
Becasue it's an async call. – Pardeep Jain May 24 '18 at 09:42 — Pardeep Jain, May 24 '18 at 09:42

score 1 · Answer 1 · answered May 24 '18 at 09:40

1

This is because observables are asychronus. You are subscrbing to asynchronous data inside the subscribe method. You can't access that data until it get initialized insde the subscribe method. That's why you are getting undefined

answered May 24 '18 at 09:40

Anuradha Gunasekara

6,553
2
27
37

score 0 · Answer 2 · answered May 24 '18 at 09:40

This is because your method contains asyc method call.

this.http.get(this.url1).subscribe(
        (data) =>{
        this.masterChartObj1 = data;
        console.log(this.masterChartObj1) // data is getting printed
    })

This is an async call and Data once availabel it will print in (data) block.

So, if you want to add some binding to that data you need to do such task within the data block.

unable to use fetched data outside subscribe() method in angular 6

2 Answers2