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