Patch API call not being called from the frontend

Question

My http.patch is not being called to the backend. This only happens when calling it from the frontend. I already tried in in Postman and it works fine.

I've tried the backend alone, and works ok.
I've been console logging everywhere and got to the conclusion that the frontend does not connect to the backend (just this route, other routes work fine, I have tons of get, post, delete that work)
I think I have an rxjs operator problem

editar-estudiante.component.ts

submit() {
    let internado: Int;
    this.internadoService
      // get the object from database that has what i need
      // to create `internado` in the next `tap`
      .getInternado(this.idInternadoElegido)
      .pipe(
        tap(int => {
          // create an object to send in the next tap, 
          // this is the object that will patch
          internado = {
            idInternado: int._id,
            nombreInternado: int.datosAdmin.nombre.toString(),
            nombreCortoInternado: int.datosAdmin.nombreCorto.toString()
          };
        }),
        tap(x => {
          // this two values `internado` and `this.estudianteID
          // are ok, i checked them many times.
          console.log("internado es: ", internado);
          console.log("estudianteId es: ", this.estudianteId);
          this.estudiantesService.patchEstudiante(this.estudianteId, internado);
        })
      )
      .subscribe();
}

estudiante-service.ts

patchEstudiante(id: string, int: Int): Observable<any> {
  //this lines get log just fine.
  console.log("id: ", id);
  console.log("int: ", int);
  return this.http
    // i tried this same route with postman and works fine.
    .patch("http://localhost:3000/users/internado/" + id, int)
    .pipe(
      catchError(err => {
        console.error("GET failed", err);
        const msg =
          "No puedes modificar el estudiante ahora; por favor intenta más tarde";
        return throwError(msg);
      })
    );
}

Last file: my backend route for this. users.js

//push internado
router.patch("/internado/:id", (req, res, next) => {
  //this does not log in the node console, so I guess that
  // we don't even reach this point, that's why I think the
  // problem is not in the backend ... yet.
  console.log("backend");
  const id = req.params.id;
  const updateOps = {};
  for (const ops of req.body) {
    for (let prop in ops) {
      updateOps[prop] = ops[prop];
    }
    // updateOps[ops.propName] = ops.value;
  }
  console.log("updateops: ", updateOps);

  User.update(
    { _id: id },
    { $push: { "datosAcademicos.internados": updateOps } }
  )
    .exec()
    .then(result => {
      console.log(result);
      res.status(200).json(result);
    })
    .catch(err => {
      console.log(err);
      res.status(500).json({ error: err });
    });
});

Regards.

Amir Arbabian · Accepted Answer · 2019-02-09 18:31:38Z

1

You need to subscribe on http call, you can do that by substituting tap to switchMap, for example:

submit() {
    let internado: Int;
    this.internadoService
      // get the object from database that has what i need
      // to create `internado` in the next `tap`
      .getInternado(this.idInternadoElegido)
      .pipe(
        tap(int => {
          // create an object to send in the next tap, 
          // this is the object that will patch
          internado = {
            idInternado: int._id,
            nombreInternado: int.datosAdmin.nombre.toString(),
            nombreCortoInternado: int.datosAdmin.nombreCorto.toString()
          };
        }),
        switchMap(x => {
          // this two values `internado` and `this.estudianteID
          // are ok, i checked them many times.
          console.log("internado es: ", internado);
          console.log("estudianteId es: ", this.estudianteId);
          return this.estudiantesService.patchEstudiante(this.estudianteId, internado);
        })
      )
      .subscribe();
}

Hope that helps.

answered Feb 9, 2019 at 18:31

Amir Arbabian

3,7092 gold badges9 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

sebaLinares Over a year ago

If i change tap for switchMap typescript complaints with 'argument of type '(x: Internado) => void' is not assignable to parameter of type '(value: Internado, index: number) => ObservableInput<{}>'. Type 'void' is not assignable to type 'ObservableInput<{}>. I think it has to do with the int from the first tap. That's from a custom type Internado.

Amir Arbabian Over a year ago

one second i will check

Amir Arbabian Over a year ago

did you put return into switchMap as in example? return this.estudiantesService.patchEstudiante(this.estudianteId, internado);

sebaLinares Over a year ago

Genius. I guess I also learned that you need to return a chained observable. Thank you very much! BTW I got a 500 error now, lol. But I'll go for that now. Thanks again :)

Amir Arbabian Over a year ago

No problem, I'm glad that it helped!

Collectives™ on Stack Overflow

Patch API call not being called from the frontend

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related