Angular 7 PATCH method to add element to a list

Question

How should I write the PATCH method that allows me to add and remove items of an array inside an array?

ItemClass:

export class ItemClass {
constructor(public person: string, public name: string, public quantity: number, public price: number){}
}

MenuModel:

    import { ItemClass } from './item.model';

    export class MenuModel {


    id: number;
    name: string;
    items: ItemClass[];

    constructor( id: number,  name: string, items: ItemClass[]){

         this.id = id;
         this.name = name;
         this.items = items;
    }
}

I have a menu component and a menu service. I need a patch method that adds elements to the ItemClass[] array inside Menu and is able to remove them as well.

The API method looks like :

   @PATCH
   @Path("/add/{menuId}")
   public void removeMenuItem(
            @PathParam("menuId") final int menuId,
            final Item item) {  // Item represents the Request Body
      final List<Item> items = this.menuRepository.get(menuId).getItems();
      items.add(item);
   }

(from https://stackoverflow.com/a/54679303/479251)

Answer 1

After the additional details on the backend's patch method, here's a (crude) example of how you could do it.

You haven't specified a version for Angular, so I will suppose you are using last version (7), and HttpClient .

import { HttpClient } from '@angular/common/http'; 
/* ... */ 
export class YourComponentOrService {

  // note : you will need to add HttpClientModule to the application module 'imports' and 'providers' sections
  constructor(private http: HttpClient) {} 

  /* ...*/ 

  // call this method when you want to add an item
  public addItem(menuID: number, itemToAdd: ItemClass): void { 
    console.log('sending patch request to add an item');

    this.http.patch(`example.com/add/{menuId}`, itemToAdd).subscribe(
      res => { 
        console.log('received ok response from patch request');
      },
      error => {
        console.error('There was an error during the request');
        console.log(error);
      });

    console.log('request sent. Waiting for response...');

  }

  // as I could see on the linked Q&A, the delete method will be very similar
  // only the url will use 'remove' instead of 'add', along with the item name, and no body.

  /* .... */
}     

Of course, this is the basic "Proof of concept" to get you started, to adapt to your need and the overall architecture of your Angular app.

As you can see, all I did was read the API endpoints, and use the patch method from the HttpClient Angular service accordingly, with the expected url and content.

Now, you have to add the logic to send the request with the correct parameters.