Unable to assign data to class variable from the httpCilent Module in Angular 11 ( eg. inside http.get().subscribe(...))

Question

this is my first Stack Overflow post so bare with me if I formatted anything incorrectly.

This is my first Angular project and I can't assign data retrieved from the http.get().subscribe(...) method to my component class variable.

My component:

...
export class LeafletMapComponent implements OnInit, AfterViewInit {

  data

  constructor(private ps: PeopleService, private NgZone: NgZone) {}


  ngAfterViewInit(): void { 

       console.log(this.allData) **DOESN'T WORK (logs undefined)**

  }


  ngOnInit(): void {

    this.ps.httpGetData().subscribe( data => {

      this.data= data
      console.log(this.data) ***WORKS (logs all my data) BUT...***
    })
    
    console.log(this.data) ***THIS DOESN'T WORK... WHY? (logs undefined)***
    
  }
}

My Service:

...

@Injectable({
  providedIn: 'root'
})
export class PeopleService implements OnInit {
  
  ...

  httpGetData() {
    return this.http.get<any>(this.URL) **WORKS**
  }

  ...
}

My question is: In this piece of code

ngOnInit(): void {

    this.ps.httpGetData().subscribe( data => {

      this.data= data
      console.log(this.data) ***WORKS (logs all my data) BUT...***
    })
    
    console.log(this.data) ***THIS DOESN'T WORK... WHY? (logs undefined)***    
}

Because I have already assigned my data to a class variable (this.data = data) inside the

.subscribe( data => {this.data = data})

method, I assume that I would be able to console.log(this.data) right after the subscribe method inside the ngOnInit() function, I would assume that this.data has already been initialized and can be accessed anywhere

I want to retrieve data as soon as my component loads, assign it to my class variable so my variable can be used in the ngAfterViewInit() function. However, inside the .subscribe() method, I am able to assign the returned data to my class variable "this.data" and log it, but, console.log(this.data) only works inside the .subscribe() method, nowhere else.

Also, does NgAfterViewInit() run before or after ngOnInit()? I am trying to access my class variable (this.data) from the NgAfterInit() function, but I must get the data from my service before I can do that...

Does this have to do with modifying Observable objects?

Edit: console.log(this.data) now works inside the ngOnInit function when I changed to a async function

async ngOnInit(): Promise<void>{
    const res = await this.ps.httpGetData().toPromise()
    this.data = res
}

But ngAfterViewInit won't detect the change because it is still logging undefined for the value this.data.

Please help and thanks in advance!

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) — mbojko, Apr 14 '21 at 21:06

score 0 · Answer 1 · answered Apr 14 '21 at 20:44

0

Your code assigns the data correctly, however, it seems like you aren't clear on the concept of asynchronous code.

When you call subscribe on your observable, that's an asynchronous call, meaning your code continues execution without waiting for the execution of the observable to complete. In other words, the code sends a request and continues execution without waiting for the response. Once the response is available, the callback function you supply to the subscribe method as an argument is executed. That's why the console.log() you call after subscribe logs nothing.

As for your question about ngAfterViewInit, it executes after ngOnInit.

Read more about this in Angular Docs

answered Apr 14 '21 at 20:44

Wisam Shaker

199
1
12

ah I see. I tried turning ngOninit() into an asynchronous function and it is able to update my class variable (console.log(this.data) inside the NgOnInit() works now). However, NgAfterViewInit() still logs undefined when loggin "this.data". Could you please explain what is happening in angular? I thought that this would work since NgOnInit() first initiates the class variable, therefore the variable can be used in the NgAfterViewInit() since it runs after NgOnInit() – tomi lui Apr 14 '21 at 22:48
During the component life cycle, angular will first initialize the component and its bindings first, when it's finished it will call the ngOnInit hook to notify you. After that, it will recursively initialize the child views from the bottom to the top of the component tree. Then, it will call the ngAfterViewInit hook. Since the observable runs asynchronously and takes a relatively long time, ngOnInit and ngAfterViewInit will run before you have your data initialized. – Wisam Shaker Apr 15 '21 at 06:00

Ritik Mishra · Answer 2 · 2021-04-15T15:37:08.703

Based on the code you've written, this is probably the sequence of events:

ngOnInit in LeafletMapComponent is called
- It makes the HTTP request
- It runs console.log(this.data) which prints undefined
ngAfterViewInit is called
- It runs console.log(this.data) which again prints undefined
The HTTP request finishes
- the subscribe callback is called
  - the field this.data is set
  - it prints some non-undefined value

The solution to this is to make sure that the HTTP request finishes in ngOnInit. You can achieve this like so:

async ngOnInit(): Promise<void> {
    this.data = await this.ps.httpGetData().toPromise();
    console.log(this.data)
}

ngAfterViewInit() will get called after ngOnInit() is called according to the Angular documentation about lifecycle hooks. However, if ngOnInit() is an async function, then it may complete after ngAfterViewInit() because Angular will not await the Promise returned by ngOnInit(). This means that you have to store a Promise or an Observable as your class variable instead of just the raw data in order to keep track of the fact that its an async value.

console.log(this.data) inside the async ngOnInit() works, but console.log(this.data) inside the ngAfterViewInit() still doesn't work.. do you know what could be wrong? — tomi lui, Apr 14 '21 at 22:15

Unable to assign data to class variable from the httpCilent Module in Angular 11 ( eg. inside http.get().subscribe(...))

2 Answers2