0

tengo una api de películas, la cual me devuelve por consola este array de objetos, pero a la hora de recorrerlos no se me muestran los datos porque no estoy accediendo a data.

Aquí tengo la interface donde guardo los nombre de las variables, me gustaría renombrar los nombres de las variables que vienen de la api, pero no se, así que lo puse igual.

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
export interface Peliculas{
   /*  poster: string;
    name: string;
    id:number;
    saga:string;
    director:string;
    descripcion:string;
    fecha:string; */
    id:number;
    title:string;
    release_date:string;
    duration:string;
    overview:string;
    cover_url:string;
    saga:string;
}

Aquí tengo el servicio donde recojo los datos de la api para mostrarlos en el componente html, pero a la hora de llamarlos me dice que no estoy accediendo a ese componente, entonces le hice el console log de la imagen

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http'
import { Observable, of, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { Peliculas } from '../mock/peliculas';

@Injectable({
  providedIn: 'root'
})
export class PeliculasService {
 /*  url:string="https://www.qando.es/docs/films.php"; */
 url:string="https://mcuapi.herokuapp.com/api/v1/movies";

  peliculas$ =this.getAll()

  constructor(private httpClient:HttpClient) { }

  getAll(): Observable<Peliculas[]> {
    return this.httpClient.get<Peliculas []>(this.url);
  }

  getPeliculas(requestID: number): Observable<Peliculas | null>{
    return this.httpClient.get<Peliculas>(
      `${this.url}/${requestID}`
    ).pipe(
      catchError((error)=>{
        if (error.status === 404) {
          return of(null);
        }
        return throwError(error);
        
      })
    )
  }
 }

En el componente html lo recorro con un ngfor pero por no se muestra porque no esta accediendo al array

*ngFor='let pelicula of pelis'

introducir la descripción de la imagen aquí

¿Cómo puedo acceder al array de data?

1 respuesta 1

2

Por lo que se ve en la imagen, la respuesta que te da la API es

{
  data: [],
  total: number
}

entonces yo haría lo siguiente

export interface Pelicula{
   /*  poster: string;
    name: string;
    id:number;
    saga:string;
    director:string;
    descripcion:string;
    fecha:string; */
    id:number;
    title:string;
    release_date:string;
    duration:string;
    overview:string;
    cover_url:string;
    saga:string;
}
export interface PeliculaResponse {
  data: Pelicula[],
  total: number
}

luego en tus métodos usaría el get con interfaz PeliculaResponse

this.httpClient.get<PeliculaResponse>(this.url);

y por último tu variable pelis que no la muestras pero supongo que en algún lado la asignas de la respuesta

this.getPeliculas(this.url).subscribe(
 (response: PeliculaResponse) => {
   this.pelis = response.data;
 }
)
2
  • me sigue dando error en data, response.data y me dice que la variable data no esta definida el 1 feb. a las 12:14
  • a veces cuando hay un error en el request la API entrega un objeto totalmente diferente, algo así como { error: 'no se encontró película con el id proporcionado' }. Esto no es un error de request por lo que no se gatilla el "catchError", pero como llega un objeto completamente diferente al que esperabas, el código falla. Yo te recomiendo usar el httpclient.get sin pasarle un tipo y una vez llegue la respuesta ver si esta es del tipo esperado, si no pues hacer algo al respecto, retornar null o tirar una excepción, ahí es acorde a tus necesidades
    – LPZadkiel
    el 1 feb. a las 12:44

Tu Respuesta

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

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