PUT return 400 (Bad Request) | Angular Community | Page 1

upbeat quarry Dec 12, 2023, 9:23 AM

#

I am trying to use the PUT Method and I am keeping this issue
http://localhost:4200/api/v1/assegnazione-progetto/13 400 (Bad Request)

Can you look at the code?

--- PROGETTI-ASSEGNAZIONE.SERVICE.TS ---

  // PUT 
  updateAssegnazioneProgettoById(
    risorsaId: number,
    updatedData: AssegnazioneRisorsaProgettoDTO
  ): Observable<AssegnazioneRisorsaProgettoDTO> {
    return this.http.put<AssegnazioneRisorsaProgettoDTO>(
      `/api/v1/assegnazione-progetto/${risorsaId}`,
      updatedData
    );
  }

--- PROGETTI-ASSEGNA-FORM.HTML ---

 <app-button
              text="Modifica"
              btnClass="btn btn-edit"
              type="button"
              (click)="editAssegnazione(progettoId)"
            ></app-button>

--- PROGETTI-ASSEGNA-FORM.TS ---

 editAssegnazione(id: number) {
    if (this.assegnaProgettoForm.valid) {
      const formValue = this.assegnaProgettoForm.value;

      // Construct the update data object
      const updateData: AssegnazioneRisorsaProgettoDTO = {
        progettoId: id,
        risorsaId: formValue.risorsaId,
        nomeProgetto: formValue.nomeProgetto,
        dataInizioAssegnazione: new Date(formValue.dataInizio),
        dataFineAssegnazione: new Date(formValue.dataFine),
        ore: parseInt(formValue.ore, 10),
      };

      console.log('This is the progetto ID:', this.progettoId);

      this.progettiAssegnazioneService
        .updateAssegnazioneProgettoById(id, updateData)
        .subscribe({
          next: (response) => {
            console.log('Update successful', response);
          },
          error: (error) => {
            console.error('Error updating', error);
          },
          complete: () => {
            console.log('Update operation completed');
          },
        });
    } else {
      console.error('Form is invalid');
    }
  }

#

This is the endpoint that works from the swagger: PUT
/api/v1/assegnazione-progetto/{id}

languid harness Dec 12, 2023, 9:37 AM

#

I assume this url: ** http://localhost:4200/api/v1/assegnazione-progetto/13** is your angular app url, what's the port for your server? Seems like your angular app is not calling your server - it calls angular app url. I'd suggest to create proxy or to call manually server_host:server_port/api/v1/assegnazione-progetto/13 to see if it helps

upbeat quarry Dec 12, 2023, 9:41 AM

#

this is the port: apiUrl: 'http://localhost:8080/',

#

Like this it return http://localhost:8080/swagger-ui/api/v1/assegnazione-progetto/13 --- This application has no explicit mapping for /error, so you are seeing this as a fallback.

Tue Dec 12 10:42:11 CET 2023
There was an unexpected error (type=Not Found, status=404).

#

is it Backend problem?

languid harness Dec 12, 2023, 9:43 AM

#

In this url /swagger-ui is not necessary

#

It's url you're calling or it's response from your api that shows this url ?

upbeat quarry Dec 12, 2023, 9:44 AM

#

ok

#

it return the the object

#

http://localhost:8080/api/v1/assegnazione-progetto/17

languid harness Dec 12, 2023, 9:44 AM

#

So as far as I understood it works fine right now ?

upbeat quarry Dec 12, 2023, 9:45 AM

#

yes

#

but not from the app

#

there is something with the code that I can't figure out

languid harness Dec 12, 2023, 9:46 AM

#

It's not about the code for me, you can read about angular proxy config, it might help

upbeat quarry Dec 12, 2023, 9:47 AM

#

I didnt get

#

{
"/api": {
"target": "http://localhost:8080",
"secure": false,
"changeOrigin": true,
"logLevel": "debug"
}
}

#

it works fine for the other CRUD

#

Not sure if the reason is the Date format

languid harness Dec 12, 2023, 9:49 AM

#

Wait, you have unefined as a param, maybe that's your issue ?

#

As soon as your api expects some number (int, long etc) undefined won't work

upbeat quarry Dec 12, 2023, 9:53 AM

#

Can you help me to find out why?

#

What I have done wrong in the code

languid harness Dec 12, 2023, 9:57 AM

#

Im at work rn so cannot help you perfectly, for me editAssegnazione method has param (id) empty, check your updateData object if it has also undefined id. I can't see rest of html for PROGETTI-ASSEGNA-FORM.HTML

upbeat quarry Dec 12, 2023, 9:58 AM

#

<app-button
text="Modifica"
btnClass="btn btn-edit"
type="button"
(click)="editAssegnazione(progettoId)"
></app-button>

languid harness Dec 12, 2023, 9:59 AM

#

And that's all?, so you're using progettoId which is in your component.ts, it's probably undefined because not setten up correctly

upbeat quarry Dec 12, 2023, 9:59 AM

#

I didn't get how to do

#

that's the main point

languid harness Dec 12, 2023, 10:01 AM

#

PROGETTI-ASSEGNA-FORM it's some kind of component which is opened somehow from another screen?

#

If yes, then you can pass value (id) as an input for example

upbeat quarry Dec 12, 2023, 10:02 AM

#

ok

#PUT return 400 (Bad Request)