Angular: HTTP POST with multiple Parameters not working

Question

My Frontend is made with Angular. Backend is made with Java Spring.

I have two entities essen(meal) and essensplan (mealplan). Each essensplan consists of five objects of essen, configured as ManyToMany Relationship in Java Spring.

The Template displays every object of essen in a selectbox. With [ngValue]="essen" I pass the object essen to the method addEssenToEssensplan in my component and service.

essensplan-detail.component.html

<form *ngIf="essensplan">
 <div class="form-group">
  <select [(ngModel)]="essen" class="form-control" [ngModelOptions]="{standalone: true}">
    <option *ngFor="let essen of speisekarte" [ngValue]="essen" label="{{essen.name}}"></option>
    </select>
  </div>
    <button (click)="addEssenToEssensplan(essen)" type="button" class="btn btn- 
    primary">Hinzufügen</button>
</form>

essensplan-detail.component.ts

  addEssenToEssensplan(essen: Essen): void {
    this.essensplanService.addEssenToEssensplan(this.essensplan, essen);
  }

essensplan.service.ts

  addEssenToEssensplan(essensplan: Essensplan | number, essen: Essen): Observable<Essen> {
    const essensplanId = typeof essensplan === 'number' ? essensplan : essensplan.id;
    const currentEssen = essen;
    const url = `${this.essensplanUrl}/${essensplanId}/add`;
    const data = {id: essensplanId, essen: currentEssen};
    return this.http.post<Essen>(url, data);
  }

Controller in Java Spring

    @PostMapping(path = "/{id}/add")
    public void addEssenToEssensplan(@PathVariable("id") int id, @RequestBody Essen essen) {
        essensplanService.addEssenToEssensplan(id, essen);
    }

Service:

    @Transactional
    public Essensplan addEssenToEssensplan(int id, Essen essen) {

        Optional<Essensplan> optionalEssensplan = essensplanRepository.findById(id);
        if (optionalEssensplan.isPresent()) {
             Essensplan essensplan = optionalEssensplan.get();
            essensplan.getEssenProWoche().add(essen);
            return essensplan;
        } else return null;
    }

I already made a POST Request via Postman Client with for example http://localhost:8080/essensplan/2/add and it worked. For me it seems like the POST Request does not reach my Java Spring Controller.

Oscar Guérin · Accepted Answer · 2020-03-18 22:27:44Z

1

The error is in your data object. You do not need to put essensplanId there. It is not part of the request body but a PathVariable.

Try :

    addEssenToEssensplan(essensplan: Essensplan | number, essen: Essen): Observable<Essen> {
        const essensplanId = typeof essensplan === 'number' ? essensplan : essensplan.id;
        return this.http.post<Essen>(`${this.essensplanUrl}/${essensplanId}/add`, {essen});
    }

Edit :

You also need to subscribe to your observable at some time or else the request will never be executed :

  addEssenToEssensplan(essen: Essen): void {
    this.essensplanService.addEssenToEssensplan(this.essensplan, essen).subscribe();
  }

edited Mar 18, 2020 at 22:27

answered Mar 18, 2020 at 22:13

Oscar Guérin

765 bronze badges

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

3 Comments

Cenasa Over a year ago

thanks, that made my code much cleaner. but sadly it still does not work. :(

Cenasa Over a year ago

There does not even appear an error. Not in the browser console and not in the console of the backend. The url for the post request should be fine tough. The method in my controller still does not get called.

Cenasa Over a year ago

I also console.log essen and the url. both are correct.

Collectives™ on Stack Overflow

Angular: HTTP POST with multiple Parameters not working

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related