estoy practicando con la api de rickandmortyapi.com pero tengo un problema que no he podido resolver. la respuesta de la api me viene como muestro en esta imágen;
, un objeto, donde una de las propiedades es un arreglo (Results), lo que intento hacer es mostrar la información de ese arreglo dentro de un ngFor en un componente. El problema es que quiero guardar ese arreglo results en una variable para luego iterarlo y mostrarlo en el componente. entonces hago la petición y luego intento hacer un mergeMap (para esperar a que se complete el primer observable) y entonces la idea es, dentro del mergeMap guardar ese arreglo en una variable local, algo así:
import { Injectable } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';
import { Observable, from } from 'rxjs';
import {Characters} from '../models/characters'
import {Details} from '../models/details'
import {tap, mergeMap} from 'rxjs/operators'
@Injectable({
providedIn: 'root'
})
export class RequestsService {
urlAllCharacters: string
list: Details[];
constructor(private httpclient: HttpClient) {
this.urlAllCharacters="https://rickandmortyapi.com/api/character/?page=1"
}
// entry(user: User): Observable<JwtResponse>
getAllCharacters():Observable<Characters>{
return this.httpclient.get<Characters>(this.urlAllCharacters)
.pipe(
mergeMap( (res: Characters)=> {
console.log('\nImprimiendo respuesta del backend:',res.results[0].id);
)
}
}
pero me muestra este error Argument of type '(res: Characters) => void' is not assignable to parameter of type '(value: Characters, index: number) => ObservableInput<any>'. Type 'void' is not assignable to type 'ObservableInput<any>'.
Characters
es una interfaz que definí con la misma estructura que me regresa el API (la respuesta de la petición), acá dejo como la hice:
. También estaba intentando usar el pipe Async, para suscribirme desde el html al método del servicio e iterar directamente sobre el arreglo, pero el problema es que no se como hacer, ya que el observable no me viene directamente como un arreglo sino un objeto donde dentro tiene el arreglo, allí me enredé y tampoco pude hacerlo de esa forma.
Cuál sería la mejor forma? porque lo último que se me ocurre es colocar un operador tap, luego un ciclo for y recorrer el vector Results del objeto e ir asignando elemento por elemento a un arreglo local (esto último no creo que sea lo mejor, ya que debería aprovechar y usar rxjs pero no he podido resolver).