Skip to main content
se añadieron 1458 caracteres en el cuerpo
Origen Enlace

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:

prueba de los datos que trae el link de detalle 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?

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:

prueba de los datos que trae el link de detalle 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?

Origen Enlace

Angular, vistas, porque no veo los datos del libro, me falta codigo?

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:

lista de libros con su link

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:

libro después de hacer click en el primer libro

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