How to remove one of item in aray object and update state after that?

Question

I have a state "Bill" and I want to delete one of item in "Product" with "ProductID". So how can I do it?

Bill = {
  "Bill_ID" : "a00231",
  "Products" : [
    {
      "ProductID" : "P0203",
      "ProductName" : "ABCD"
    },
    {
      "ProductID" : "P023243",
      "ProductName" : "ZYZ"
    }
  ]
}

How can I update the state after delete product item?

Please post the code, asking for a solution without initial struggle doesn't help. — buoyantair, Oct 13 '17 at 14:10
Possible duplicate of [Javascript: How to filter object array based on attributes?](https://stackoverflow.com/questions/2722159/javascript-how-to-filter-object-array-based-on-attributes) — bennygenel, Oct 13 '17 at 14:31

score 0 · Answer 1 · answered Oct 13 '17 at 14:15

0

I think you could use thepop() method. You can pop the last element from your products array and look at the popped element. Something like:

var poppedElement = Bill.Products.pop();
console.log(Bill)              //Bill withoug last Products element
console.log(poppedElement)     //just the last element of Products

Not sure if this will work completely off the top of my head, but hopefully will give you a starting place at least :)

Check out this link for more info: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop

Let me know how it goes!

answered Oct 13 '17 at 14:15

CodeMonkey123

1,046
13
22

thats assuming he wants to delete the last item – WayneC Oct 13 '17 at 14:18
Ah, forgot about the "ProductId", got carried away, sorry! – CodeMonkey123 Oct 13 '17 at 14:25

An Nguyen · Answer 2 · 2017-10-13T14:41:37.270

You can use filter on bill.products array, like following (note it must be != not ==)

bill.products.filter(x => x != yourDesiredToBeDeletedId)

Treat this.state as if it were immutable

Since your state contains an array within an object, I suggest to use lodash's cloneDeep.

let newBill = _.cloneDeep(this.bill);
newBill.products = newBill.products.filter(x => x != yourDesiredToBeDeletedId);
this.setState(bill: newBill);

How to remove one of item in aray object and update state after that?

2 Answers2