0

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;

introducir la descripción de la imagen aquí , 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:

introducir la descripción de la imagen aquí

. 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).

1
  • Hola Julian. El código en imágenes no es bien recibida por los colaboradores del sitio. Por favor agrega el código manualmente y en adición al final, agrega tu pregunta de una forma más concreta. Recordar que el foro no es basado en opiniones, debes hacer más clara aún la pregunta exacta que tienes o el problema que presentas. Te sería de utilidad pasar por el enlace de Ayuda del foro donde encontrarás más información acerca de cómo hacer una buena pregunta. Saludos.
    – RRGT19
    Commented el 27 sept. 2020 a las 0:22

2 respuestas 2

1

Encontré un operador llamado pluck el cuál extrae la propiedad del objetó, así que el código de mi servicio quedó 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, pluck} 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<Details[]>{
        return this.httpclient.get<Characters>(this.urlAllCharacters)
            .pipe(
                pluck(('results'))
            )
    }
}

y en mi componente me suscribí directamente al observable desde el html con el pipe async, el archivo .ts de mi componente quedó así:

import { Component, OnInit } from '@angular/core';
import {RequestsService} from '../../services/requests.service';
import {tap, filter, mergeMap} from 'rxjs/operators'
import {Characters} from '../../models/characters' 
import { Observable } from 'rxjs';



@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

    result: Observable<any>;

  constructor(private requestsService: RequestsService) { }

  ngOnInit() {
    this.result= this.requestsService.getAllCharacters()

  }

}

y el html así:

<div *ngFor="let item of result | async" class="row col" style="margin-top: 56px;">
    <h5> ---------> {{item.name}} </h5>
</div>

y terminé teniendo 2 interfaces, una para definir la estructura de la respuesta del API (Characters):

y una para la respuesta ya filtrada (cuándo extraigo el arreglo):

export interface Details {
    id: number,
      name: string,
      status: string,
      species: string,
      type: any,
      gender: string,
      origin: {
        name: string,
        url: string
      },
      location: {
        name: string,
        url: string
      },
      image: string,
      episode: string[],
      url: string,
      created: string
}

Solo quedé con una duda, antes el método del servicio lo tenía así:

    getAllCharacters():Observable<Characters>{  /* <<<---- aquí colocaba que // retornaba un observable de tipo Characters*/
        return this.httpclient.get<Characters>(this.urlAllCharacters) /* Igual acá */
            .pipe(
                pluck(('results'))
            )
    }
}

Pero me mostraba error, supongo que es porque al utilizar el operador Pluck ya lo que retorna el método no es de tipo Characters? Como lo tengo ahora (como coloqué arriba en esta misma respuesta), estaría diciendo que el metodo get de httpclien devuelve una respuesta de tipo Characters pero al aplicar el operador Pluck el método retorna una respuesta de tipo Details ? no está mal como lo tengo? es una duda, si me la pueden aclarar sería de gran ayuda, ya que igual sigue teniendo relación con el problema.

3
  • Sí, ahora el resultado devuelto es de tipo Details. La implementación se ve bien.
    – Lobos
    Commented el 27 sept. 2020 a las 4:04
  • @Lobos y eso es lo correcto, es decir, definir una interfaz para cada cosa?
    – JulianProg
    Commented el 27 sept. 2020 a las 4:30
  • Si te refieres a una interfaz para Characters y otra para Details, sí. Pero sin repetir las definiciones. Por ejemplo, Characters tiene una propiedad llamada results que puede definirse como un arreglo de Details. De esa forma Details puede reusarse.
    – Lobos
    Commented el 27 sept. 2020 a las 15:21
0

Te dejo un ejemplo del servicio y un componente que renderiza los datos, usé any por simplicidad:

Servicio

    import { HttpClient } from '@angular/common/http';
    import { Injectable } from '@angular/core';

    @Injectable()
    export class HttpService {
    
      constructor(private http : HttpClient) { }
    
      getAllCharacters(){
            return this.http.get('https://rickandmortyapi.com/api/character/')
        }
    
    }

Componente

import { Component } from '@angular/core';
import { HttpService } from './http.service';

@Component({
  selector: 'my-app',
  template: `
  
  <ul>
   <li *ngFor="let result of results">
     {{result | json}}
   </li>
  </ul>
  
  `,
})
export class AppComponent  {

  results: any[] = [];

  constructor(private http: HttpService){
    this.http.getAllCharacters().subscribe(( characters : any) =>{
      // extraer el arreglo de la respuesta
      this.results = characters.results;
    });
  }
}
1
  • Hola amigo! gracias por tu tiempo. no era necesario el mergeMap entonces? igual terminé resolviendo de una manera distina con el operador pluck que no lo conocía. coloque lo que hice en una respuesta, puedes leerlo? ya que al final dejé una duda relacionada con el mismo tema que aún no tengo muy clara. Te puedo calificar tu respuesta igual, pero me podrías ayudar con la duda que menciono al final? Gracias de antemano.
    – JulianProg
    Commented el 27 sept. 2020 a las 3:18

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.