se que he venido formulando algunas preguntas con respecto a Angular, tengo una situación con mi código que tratare de explicar lo mejor que pueda, ya que necesito resolver esto pronto. Tengo estos dos links: link para autor:
https://the-books--goncalomatos2.repl.co/search?author=tolkien
y el link para un libro de ese autor, (este es de un libro con id= OL26757374M)
https://the-books--goncalomatos2.repl.co/books?id=OL26757374M
Yo consigo acceder a la lista de libros del autor como muestro a continuación:
al hacer click en algun link de libros deberia traerme: titulo, autor, foto de la cubierta y un resumen del libro, que según veo es información que esta compartida entre el primer y segundo link, por ejemplo se que puedo ver el titulo del libro y el autor desde el primer link, y se que el segundo link tiene la cubierta y el resumen. La cosa es que al hacer click solo me trae el titulo y creo tener todo en orden porque no muestra error alguno en consola o en compilador, anexo imagen:
ahora coloco mi codigo:
Api service:
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, of, forkJoin, merge } from 'rxjs';
import { map } from 'rxjs/operators';
import { BooksDictionary, Book, DocsServer, Resume } from './types';
@Injectable({
providedIn: 'root'
})
export class ApiService {
//cacheamos los Books
booksCache: BooksDictionary;
constructor( private http: HttpClient) { }
//funcion para formatear los datos
// private _extractId(urn) {
// return urn.substring(urn.lastIndexOf('/') + 1);
// }
private _adaptBookFromServe( data:any ): Book {
return {
id: data.id,
title: data.title,
author: data.author_name[0],
}
}
private _adaptResumeFromServe( data:any ): Resume {
return {
id: data.id,
name: data.title,
author: data.author_name,
resume: data.resume,
cover: data.cover
}
}
private _adaptBooksFromServe(data: DocsServer): Book[] {
return data.docs.map<Book>(serverBook => this._adaptBookFromServe(serverBook));
}
getBooks(): Observable<BooksDictionary> {
if ((this.booksCache)) {
return of(this.booksCache);
}
return this.http.get('http://localhost:3000/search?author=tolkien').pipe(map<any, BooksDictionary>(data => {
const booksList = this._adaptBooksFromServe(data);
this.booksCache = Object.fromEntries(
booksList.map(book => [book.id, book])
);
return this.booksCache;
})
);
}
getBook(id: string): Observable<Book> {
if (this.booksCache[id]) {
return of(this.booksCache[id]);
}
return this.http.get(`http://localhost:3000/books?bibkeys=OLID:${id}&format=json&jscmd=details`).pipe(
map<any, Book>(book => this._adaptBookFromServe(book))
);
}
}
Componentes:
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ApiService } from './../api.service';
@Component({
selector: 'app-book-select',
templateUrl: './book-select.component.html',
styleUrls: ['./book-select.component.css']
})
export class BookSelectComponent implements OnInit {
title: string;
constructor(
private api: ApiService,
private route: ActivatedRoute
) { }
ngOnInit(): void {
this.route.paramMap.subscribe(params => {
const id= params.get('id');
this.api.getBook(id).subscribe(book => {
this.title = book.title;
})
})
}
}
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';
import { ApiService } from './../api.service';
import { Link } from './../link-list/link-list.component';
@Component({
selector: 'app-book-list',
templateUrl: './book-list.component.html',
styleUrls: ['./book-list.component.css']
})
export class BookListComponent implements OnInit {
bookLinks: Link[];
bookSubscription$: Subscription;
constructor( private api: ApiService) { }
ngOnInit(): void {
console.log('books list was build');
this.bookSubscription$ = this.api.getBooks().subscribe((book) => {
const bookList = Object.values(book);
console.log(bookList)
this.bookLinks = bookList.map<Link>(book => {
return {
title: book.title,
url: `/books/${book.id}`
};
});
});
}
ngOnDestroy(): void {
console.log('books-List was destroyed');
this.bookSubscription$.unsubscribe();
}
}
Agradecido de antemano por tomarse el tiempo para leer y ayudar
EDICION
componentes html:
app.component.html
<div>
<nav>
<h1>Lista de Libros</h1>
</nav>
<app-book-select></app-book-select>
<router-outlet></router-outlet>
</div>
book-select.component
{{title}}
{{Author}}
{{Description}}
book-list.component
<app-link-list [linkList]="bookLinks"></app-link-list>
y cambie en el book-select.component.ts:
ngOnInit(): void {
this.route.paramMap.subscribe(params => {
const id= params.get('id');
this.api.getBook(id).subscribe(book => {
this.title = book.title;
this.author = book.author;
this.description = book.description;
})
})
}
Interfaces
interface BooksDictionary{
[id: string]: Book;
}
interface Book {
id: string;
title: string;
author: string[];
description: string;
cover:string
}
interface Docs {
id: string;
name: string;
}
interface DocsServer {
docs: any[];
}
interface Resume {
id: string;
name: string;
author: string;
resume: string;
cover: string
}
//las exporto para poder usarlas en mis componentes o mi apiService
export { BooksDictionary, Book, Docs, DocsServer, Resume }
pero estoy convencido de que es esta linea de codigo que no esta a leerse porque no llega alli ninguna peticion:
return this.http.get(`http://localhost:3000/books?id=${id}`).pipe(
map<any, Book>(book => this._adaptBookFromServe(book)),
);
}
si ven y comparan este segmento de codigo con el que envie anteriormente solo cambie esto books?id=${id}
, ya que segun veo en los link dados, es la manera correcta en que se lee los detalles del libro:
la cosa es segun mi api-service como salto del link autor al link detalles libro para que me de los datos que necesito?