Having trouble retrieving the details, as it is rendering to the dom with an undefined error. Check out this image for reference:
https://i.sstatic.net/YB2Lf.jpg
Welcome to the Book Details Component
export class BookDetailsComponent implements OnInit {
book: Book;
books: Book[];
id: string;
constructor(private route: ActivatedRoute, private booksService: BooksService, private http: Http) { }
async getAsyncData() {
this.books = await this.http.get('/assets/books.json').toPromise().then(
data => this.books = data.json().books
);
this.book = this.books.filter(book => book.id === this.id)[0];
}
ngOnInit() {
this.route.params.subscribe(
(params: Params) => {
this.id = params['id'];
if (this.book) {
this.book = this.booksService.getBook(this.id);
} else {
this.getAsyncData();
}
}
);
}
}
Additionally, here's the getBook function from service:
getBook(id: string) {
return this.books.filter(book => book.id === id)[0];
}