Textbook[ ] is undefined after setting it equal to subscribing to Observable<Textbook[]>

Question

Heres how I am calling the GET HTTP method:

getTextbooks() :Observable<Textbook[]> {
    return this.http.get<Textbook[]>('http://localhost:3000/catalogue');
}

Which parses the HTTP response to Textbook[] and returns an observable

I then subscribe to the observable and get the data like so:

this.textbookService.getTextbooks().subscribe(
    (data: Textbook[]) => this.textbooks = data,
    (err: any) => console.log(err),
);

The weird thing is, checking in the Network tab in the Chrome inspecting tool shows that it indeed received an array of objects, each with the correct parameters, as well as a 200OK status. If I printed out data in the callback of the .subscribe method it also shows the array of Textbooks just fine. It is just when I try to set this.textbooks = data when I get that this.textbook is undefined. this.textbooks is also of type Textbook[], same as data[].

Any advice would be amazing, thank you!

Answer 1

You might be trying to print this.textbook outside the subscribe block

As the calls are async so please check only after the calls(i.e. subscribe block is resolved)

Therefore user this.textbook inside subscribe block

this.textbookService.getTextbooks().subscribe(
    (data: Textbook[]) => {
           this.textbooks = data;
           console.log(this.textbook);
           },
    (err: any) => console.log(err),
);