I've been working on integrating the Google Books API into my project. Initially, I set up the interfaces successfully and then created a method that would return an Array with a list of Books.
public getBooks(): Observable<Book[]>{
return this.http.get<Book[]>('https://www.googleapis.com/books/v1/volumes?q=filibusterismo');
}
(I specified the search term as "filibusterismo" to avoid mistakes, but planned to change it later.)
Now, the challenge is using the Array of Book in my application. The issue arises because the getBooks method returns an observable Array of Books instead of a regular Array. Here is how I initially attempted to handle it:
books:Book[];
constructor(private GoodreadsService:GoodreadsService) { }
ngOnInit() {
this.libro=this.GoodreadsService.getBooks();
}
I tried to resolve this by utilizing async:
*ngFor="let book of books | async"However, I encountered the same problem. After doing some research on Stack Overflow, I learned that I need to use subscribe in the ngOnInit() function, like so:
this.GoodreadsService.getBooks().subscribe(res=>{this.books=res},
error => { // on failure
console.log('Error Occurred:');
});
The issue persists as even though there are no apparent errors being returned, when I try to log
console.log(this.libro1);
The console indicates that the array is undefined, despite being defined as an array of Book. Additionally, I am still unable to utilize ngFor loop.
I also attempted to map the getBook method to return a regular Array instead of an observable array, but was unsuccessful despite researching numerous related questions on Stack Overflow.
If anyone can provide insight on how to resolve this issue and enable me to effectively use an ngFor loop in the HTML code, I would greatly appreciate it.
Here is a snippet of my HTML:
<p>busqueda works!ss </p>
<table>
<thead>
<th>Name</th>
<th>Indexs</th>
</thead>
<tbody>
<div *ngFor="let book of books | async">
<h1 >
<p>prueba</p>
</h1>
</div>
</tbody>
</table>