Elements passed through a form not received by the server nor displayed on the front. PATCH method | Angular | Dropwizard

Question

Server side shows that the PATCH method is called and adds a null at the end of the array, instead of a new Item array with the Name and Price taken from user input.

PATCH method in the service component:

      patchAdd(menu: MenuModel | number, itemToAdd: ItemClass): Observable<any> { 
        const id = typeof menu === 'number' ? menu: menu.id;
        const url = `${this.menusUrl}/add/${id}`;

        return this.http.patch(url, itemToAdd, httpOptions).pipe ()
}

patchItAdd function which implements the patchAdd method and takes data from html: Note that there are a couple of comments, from my unsuccessful tries.

 patchItAdd(name: string, price: number){
        name = name.trim();
        if (!name) {return;}
        const id = +this.route.snapshot.paramMap.get('id');
        this.menuService.patchAdd(id, this.item)
        //With this ^^ , the value is null, but new element is added to the array. Cannot read property push of undefined. PATCH is triggered on the backend.
        // this.menuService.patchAdd(id, {name, price} as ItemClass) ----- Three errors, nothing happens
        .subscribe(item => {
          this.items.push(item);
        });}

HTML label which is supposed to collect user input and pass data to the function:

<label class="forma">
          Name of the item:
          <input #itemName placeholder="What's the name of the item?" onfocus="this.placeholder =''" onblur="this.placeholder = 'What\'s the name of the item?'"/><br><br>
          Item's price:
          <input #itemPrice placeholder="What's the price?"onfocus="this.placeholder =''" onblur="this.placeholder = 'What\'s the price?'"/><br><br>
          <span class="addnewbuttontext"><button class="addnewitembutton" (click) = "patchItAdd(itemName.value, itemPrice.value)">Add</button></span>
      </label><br>

PATCH method in the backend (Dropwizard):

   @PATCH
   @Path("/add/{menuId}")
   public void addMenuItem(
            @PathParam("menuId") final int menuId,
            final Item item) {  
      final java.util.List<Item> items = this.menuRepository.get(menuId).getItems();
      items.add(item);
   }

Only a null is added to the array on the backend after clicking the "ADD" button and calling the patchItAdd function. Obviously, no data is displayed on the front-end neither because of that. What am I doing wrong, or at least how should I approach the PATCH method on the front-end, with Angular 7?

While debugging the Angular Typescript "patchAdd" function, do you see a correct value for itemToAdd? — LppEdd
– LppEdd, Commented Feb 17, 2019 at 22:23
i'm not at the machine currently, I will be in like 8 hours. What to do in case I do, and what in the case I don't, if you don't mind? — soulzap
– soulzap, Commented Feb 17, 2019 at 22:31

LppEdd · Accepted Answer · 2019-02-17 23:14:37Z

I'll try to address a couple of points, even if I don't have a complete understanding of the problem.

Why are putting a + there? It will transform the variable in its numeric representation, is that what you want? The get() call return value is string | null

const id = +this.route.snapshot.paramMap.get('id');

Here you're calling menuService.patchAdd with this.item, but I suppose you want to create a new Item instance using the input values name and price.

// Angular
(click) = patchItAdd(itemName.value, itemPrice.value)

// Java
patchItAdd(name: string, price: number){
     ...
     this.menuService.patchAdd(id, this.item)

Are my assumptions correct?

Another issue I see is that you're passing the id, which should be string (or number in your case, since you transform it with the +) to patchAdd

const id = +this.route.snapshot.paramMap.get('id');
this.menuService.patchAdd(id, this.item)

The patchAdd function expect a MenuModel, which is a complex object.
How's that? Are you sure this is what you want?

Let patchItAdd accept the menu.id value

(click) = "patchItAdd(menu.id, itemName.value, itemPrice.value)"

Now update the method

// Now this method accept the MenuModel#id property
patchItAdd(menuId: number, name: string, price: number){
   if (!name) {
      return;
   }

   const trimmedName = name.trim();

   // Construct a new ItemClass instance.
   // You need to take care by yourself of the "person" property and the "quantity" property
   const newItem = new ItemClass("", trimmedName, 0, price)

   this.menuService.patchAdd(menuId, newItem).subscribe(item => {
      this.items.push(item);
   });
}

Update also the patchAdd method to accept the menu ID, instead of the complete MenuModel

// Now this method accepts the menu ID  
patchAdd(menuId: number, itemToAdd: ItemClass): Observable<any> { 
   const url = `${this.menusUrl}/add/${menuId}`
   return this.http.patch(url, itemToAdd, httpOptions)
}

On the back-end add a no-args constructor to Item

public Item() { }

yes, you're right! I want input the name and price, pass that to the backend, add it to the array and later display it with the get method. I appreciate every bit of information and code you share with me, so please do not hesitate to post anything.
hey, take a look at this, there is a lot more code in this post. It is the same issue, but I posted another one (this one) with a lot less code, as I didn't want anyone to be overwhelmed by the amount of code. The ItemClass is here as well. stackoverflow.com/questions/54737419/item-names-not-loading
@soulzap could you answer the question I added at end of the answer?
I'm really not sure.. I can't come up with a working PATCH function on the front-end and I'm opened to any suggestions. I went with those parameters and stuff based off of the post method. I'm not sure how should I construct the two function on the front-end... (one in the service and the other in the component) I'm not even sure if the form (label) is structed properly, as that's how I use it for the post method.

Collectives™ on Stack Overflow

Elements passed through a form not received by the server nor displayed on the front. PATCH method | Angular | Dropwizard

1 Answer 1

17 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

17 Comments

Linked

Related