2

Al intentar ejecutar el método eliminar dentro del suscribe, me salta un error porque reservaEntry.id es igual a null

Eso es debido a que antes igualo this.reservaPendiente = null, al hacer eso la variable de entrada tambien cambia, y no entiendo por qué.

¿Como puedo solucionar el problema, para que me ejecute primero el crear, y despues de eso, pueda ejecutar el metodo eliminar con el id del objeto que se le pasa por entrada, o con el id del objeto devuelto?

¿Por que el console.log(reserva) es undefined, no seria el objeto devuelto por el metodo crear?

crearReserva(reservaEntry: ReservaPendiente): void {
        this.reservaPendiente = reservaEntry;
        this.reservaPendiente = null;
        this.reservaService.crear(this.reservaPendiente).subscribe(
          reserva => {
            console.log(reserva);
            this.reservaService.eliminar(reservaEntry.id);
            this.router.navigate(['/reservas'])
            swal.fire('Nueva reserva', `La reserva ha sido confirmada con éxito!`, 'success')
          }
        );
 }
2
  • Mira Cómo preguntar para que tu pregunta sea mejor recibida. También, aprovecha y haz el recorrido de bienvenida para entender mejor cómo funcionamos y de paso obtener tu primera medalla!
    – gbianchi
    Commented el 13 may. a las 18:39
  • Es javascript, para un proyecto de angular
    – David
    Commented el 13 may. a las 23:16

2 respuestas 2

1

Pues el problema esta ahí, le asignas null y luego quieres hacer todo lo demás. Para resolverlo tienes que crear una copia o puedes elegir optimizar el código y ahorrarte unas líneas:

  1. Versión como tienes el código:
crearReserva(reservaEntry: ReservaPendiente): void {
    const reservaCopy = { ...reservaEntry };
    this.reservaPendiente = reservaEntry;
    this.reservaPendiente = null;
    this.reservaService.crear(reservaCopy).subscribe(
      reserva => {
        console.log(reserva);
        this.reservaService.eliminar(reservaCopy.id); 
        this.router.navigate(['/reservas'])
        swal.fire('Nueva reserva', `La reserva ha sido confirmada con éxito!`, 'success')
      }
    );
}

Se resuelve creando una shallow copy (copia superficial) para romper la referencia al objeto original:

const reservaCopy = { ...reservaEntry };

y usando reservaCopy para las operaciones

  1. Versión mejorada
crearReserva(reservaEntry: ReservaPendiente): void {
    this.reservaService.crear({ ...reservaEntry }).subscribe(
      reserva => {
        console.log(reserva);
        this.reservaService.eliminar(reservaEntry.id);
        this.router.navigate(['/reservas']);
        swal.fire('Nueva reserva', `La reserva ha sido confirmada con éxito!`, 'success');
      }
    );
}

En lugar de crear y hacer tanta asignación, enviamos directamente la copia.

En base a tu última pregunta, si console.log(reserva) te regresa undefined es porque no regresas nada del método crear, si es así comparte el código para seguirte ayudando.

Como último consejo, puedes crear un método en el servicio para manejar directamente las alertas en lugar de manejarlas a nivel de componente y ahorrarte algo más de código.

2
  • Muchisimas gracias, respecto al método crear me devuelve un observable ``` crear(reserva: ReservaPendiente): Observable<ReservaPendiente> { return this.http.post(this.urlEndpoint, reserva).pipe( map((response: any) => response.reserva as ReservaPendiente)); } ``` de ahi mi duda de porque en el console.log() todavia no esta definido
    – David
    Commented el 14 may. a las 19:06
  • @David que te regresa response? A lo mejor response.reserva no trae nada y por eso regresa undefined, evita usar any ya que eso hace que pase cualquier cosa exista o no.
    – René
    Commented el 15 may. a las 2:45
0

Dentro de subscribe tienes 3 tipos de notificaciones: next, error, complete.

next: cuando todo se proceso bien

error: cuando algo fue mal

complete: al terminar el subscribe por next o error

Mas info acá

this.reservaService.crear(reservaCopy).subscribe(
  next: reserva => {
    //todo tu código
  }
  , error: error => console.error(error) //maneja el error
  , complete: () => {} //lo que necesites cuando finalice por next o error
)

Sin embargo para un mejor manejo te recomiendo que la lógica de eliminación y el servicio la utilices en una función fuera de la creación.

como por ejemplo:

crearReserva(reservaEntry: ReservaPendiente): void {
        this.reservaPendiente = reservaEntry;
        this.reservaPendiente = null;//verifica por que le asignas null
        this.reservaService.crear(this.reservaPendiente).subscribe(
          next: reserva => {
            console.log(reserva);
            this.eliminarReserva(reverva.id) //acá procesas la eliminación
          }
          , error: error => console.error(error) //maneja el error
          , complete: () => {} //lo que necesites cuando finalice por next o error
        );
 }

eliminarReserva(id: number) => {
  this.reservaService.eliminar(id).subscribe(
    next: () => {
      this.router.navigate(['/reservas'])
      swal.fire('Nueva reserva', `La reserva ha sido confirmada con éxito!`, 'success')
    }
    , error: error => console.error(error) //maneja el error
    , complete: () => {} //lo que necesites cuando finalice por next o error
  )

}

en el next de crearReserva este objeto reserva no se que propiedades tiene, estoy asumiendo que tiene una propiedad id y esa utilizo para eliminarReserva.

Espero te sirva saludos 🤓.

2
  • Muchas gracias!!!
    – David
    Commented el 14 may. a las 19:35
  • Recuerda marcar la respuesta como correcta por si alguien más necesita la misma ayuda.
    – DavElsanto
    Commented el 15 may. a las 15:41

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.