I've been working on an Angular 9 app that interacts with the Google Books API through requests.
The issue I'm facing is that whenever the requestBookByISBN(isbn: string) function makes a .subscribe call, it triggers a page refresh which I'm trying to prevent.
private callAPI(isbn: string): Observable<GoogleBook[]> {
return this.httpClient
.get<{ results: GoogleBook[] }>
(`https://www.googleapis.com/books/v1/volumes?q=${isbn}&key=${ApiLookupService.API_KEY}`)
.pipe(map(matches => matches.results || []));
}
public requestBookByIsbn(isbn: string): GoogleBook[] {
const bookResults: Observable<GoogleBook[]> = this.callAPI(isbn);
let books: GoogleBook[] = [];
bookResults.subscribe(data => books = data);
return books;
}
To provide more context, below is a snippet of the component.ts file containing relevant code snippets:
import {Component, OnInit} from '@angular/core';
import {BookServiceImpl} from '../../shared/Book/service/book.service.impl';
import {CopyServiceImpl} from '../../shared/Copy/service/copy.service.impl';
import {AuthorServiceImpl} from '../../shared/Author/service/author.service.impl';
//more imports
@Component({
selector: 'app-addbook',
templateUrl: './addbook.component.html',
styleUrls: ['./addbook.component.css']
})
export class AddbookComponent implements OnInit {
// various properties and methods are defined here
constructor(private bookService: BookServiceImpl,
private copyService: CopyServiceImpl,
private authorService: AuthorServiceImpl,
//more dependencies injected
) {
}
// various methods such as initAuthors, findAuthors, isbnLookUp, onSubmit are implemented here
}
It's possible that conflicts with other subscribe calls might also be contributing to the issue.