How to add a new key and value to an existing object in an array (Angular)

Question

I want to push a new key and corresponding value to an already existing object. My object is returned after subscribing to a WEB API endpoint. Within the object returned, I want to add a "QuantityOnHand" key and value. I have attempted the following, however, it is not as I want it.

branchProduct: BranchProduct;

getProductByName() {

     const productName = this.addProductForm.get('product')?.value;

     const quantity = this.addProductForm.get('quantity')?.value;

     this.branchService.getProductByName(productName).subscribe((resp: any) => {
      this.branchProduct = resp;
      this.branchProduct.QuantityOnHand = quantity;
      console.log(this.branchProduct);
     })

   }

The "branchProduct" interface class is as follows:

export interface BranchProduct {
  BranchId: number;
  ProductId: number;
  ProductTypeName: string;
  ProductName: string;
  QuantityOnHand: number;
  BaselineQuantity: number;
}

After assigning a value to the QuantityOnHand attribute, the object is logged as follows:

Would it be possible to set the QuantityOnHand as an actual additional attribute of the aforementioned object after the object is created? I have tried setting "branchProduct" as an array and pushing the value of the quantity through to it, however, I had no success doing so.

Any help is appreciated.

It seems like getProductByName returns an array, why is that? Can it return many products? If so, do you want to assign QuantityOnHand to all products? — ShamPooSham
– ShamPooSham, Commented Aug 27, 2021 at 0:44

Muhammad Ibrar · Accepted Answer · 2021-08-26 22:23:51Z

In the picture it's showing that branchProduct data is in 0 index of array. If branchProduct data always be one record on 0 index then you can fix it like.

getProductByName() {
     const productName = this.addProductForm.get('product')?.value;
     const quantity = this.addProductForm.get('quantity')?.value;
     this.branchService.getProductByName(productName).subscribe((resp: any) => {
      this.branchProduct = resp;
      this.branchProduct[0].QuantityOnHand = quantity;
      console.log(this.branchProduct);
     })

   }

Other wise you need to a implement a loop to modify the data.

const branchProductArray = []
branchProductObj.map((product, index) => {
   let productObject = {... product };
    productObject.QuantityOnHand = quantity;
    branchProductArray.push(productObject)

})
console.log(branchProductArray). //will be desire result.

I'd probably do this.branchProduct = resp[0] so the type doesn't need to be changed

N Deol · Accepted Answer · 2021-08-27 00:23:53Z

1

this.branchProduct is an array.

  this.branchProduct[0].QuantityOnHand = quantity;

should work

answered Aug 27, 2021 at 0:23

N Deol

73 bronze badges

Comments

Sojin Antony · Accepted Answer · 2021-08-26 20:14:34Z

0

Use spread operator

this.branchProduct = {...resp, quantityonHand:quantity}

answered Aug 26, 2021 at 20:14

Sojin Antony

2,2521 gold badge14 silver badges23 bronze badges

1 Comment

SeventhWarhawk Over a year ago

Would you mind perhaps elaborating? I have added your answer to where I initially set this.branchProduct equal to resp, however, it displays the object similarly as to how I had it initially, However, now on top of that, it has the object array set as follows: {0: {...}, quantityOnHand: 4}

Collectives™ on Stack Overflow

How to add a new key and value to an existing object in an array (Angular)

3 Answers 3

1 Comment

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Related