0

Tengo este código en un componente que funciona perfectamente al llamar al servicio, mostrando los resultados leidos en el html correspondiente:

this._starshipsService.GetStarShips('https://swapi.dev/api/starships/').subscribe( (data: any) => {
  this.starships = data.results;

El servicio se limita a llamar a una API:

  GetStarShips(url): any {
    const headers = new HttpHeaders({'Authorization': 'none'});
    return this.http.get( url, { headers } );

Intento aplicar algo parecido al buscador, es otro componente, para poder filtrar los datos recibidos:

this.aFound = this._starshipsService.buscarStarShips( this.searchText );
            console.log('resultados encontrados ... ' + this.aFound);

El servicio sería algo así, prescindo de los console.log para reducir el código:

  buscarStarShips( text: string ): any {
    let aShips: any[] = [];
    let aResultados: any[] = [];

    text = text.toLowerCase();

    this.GetStarShips('').subscribe( (data: any) => {
            aShips = data.results;

            for( let ship of aShips ) {
                    let cShip = ship.name.toLowerCase();
                    if ( cShip.indexOf(text) >= 0 ) {
                      aResultados.push( ship );
                    }
            }
            return aResultados;
          });

  }

Estos son los timmings de los procesos, "resultados encontrados" se resuelve sin datos antes de esperar a recibir la respuesta de la API en la que si se encontrarán datos:

17:41:40:690 - buscando ... wing
17:41:40:692 - resultados encontrados ... undefined
17:41:40:942 - resultados API: 10 leidos
17:41:40:942 - Y-wing found ...
17:41:40:942 - X-wing found ...
17:41:40:942 - 2 result/s encontrados

Seguro que tocará utilizar promises, async y/o await, pero no he conseguido integrar ninguno de los ejemplos encontrados.

Gracias, Xavi

1 respuesta 1

1

El problema está en el buscarStarShips. La función no está devolviendo nada. Una de las soluciones es hacer que la función devuelva el Observable:

buscarStarShips( text: string ): Promise<any[]> {
    let aShips: any[] = [];
    let aResultados: any[] = [];

    text = text.toLowerCase();
    
    // Creamos una promesa que se resolverá con la respuesta del servidor
    return new Promise((resolve, reject) => {

      this.GetStarShips('').subscribe( (data: any) => {
              aShips = data.results;

              for( let ship of aShips ) {
                      let cShip = ship.name.toLowerCase();
                      if ( cShip.indexOf(text) >= 0 ) {
                        aResultados.push( ship );
                      }
              }
              // Entregamos el resultado a la promesa
              resolve(aResultados);
            });
      });
  } 

Y ahora si podés usar:

this.aFound = await this._starshipsService.buscarStarShips( this.searchText );
console.log('resultados encontrados ... ' + this.aFound);
6
  • La 1ª vez funciona perfecto, las siguientes búsquedas, si no se recarga la página no funcionan, seguro que es por cómo hago la llamada, esta sería la función que tengo en el componente navbar, no entra en el navigate: buscarShip( text: string ) { console.log('buscar ... ' + text); this.SearchRouter.navigate( ['/buscar', text ] ); }
    – Xavi T.
    Commented el 27 oct. 2020 a las 16:58
  • Disculpá @XaviT. la función que estabas usando es buscarStarShips no indicas que relación hay con buscarShip y el navbar
    – Nery Ortez
    Commented el 27 oct. 2020 a las 18:56
  • Perdonarme, el input de search está en el navbar, desde el mismo navbar se lanza la función buscarShip que simplemente hace un .navigate al componente buscador donde se ejecuta el servicio buscarStarShips, espero aclare la logística usada.
    – Xavi T.
    Commented el 27 oct. 2020 a las 21:50
  • Entiendo... El problema está probablemente en el navigate entonces... Pero es un problema diferente... Tendrías que mostrar el codigo del navbar junto con la llamada al navigate
    – Nery Ortez
    Commented el 28 oct. 2020 a las 0:39
  • Este seria el código en el navbar: ngOnInit(): void { } buscarShip( text: string ) { console.log('buscar ... ' + text); // this._starshipsService.buscarShips( text ); this.SearchRouter.navigate( ['/buscar', text ] ); }.
    – Xavi T.
    Commented el 28 oct. 2020 a las 6:31

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.