How to remove json array of object using json object in javascript?

Question

I'm using react-native cli to build application. I have store required data in variable. For delete unwanted cart, I have pass the json object that bind with the element. Unfortunately, the data is not deleted.

My data:-

[
   {
      "ProdID":306,
      "ProdName":"Freezing Choc",
      "ProdImage":"./Source/Product/2_20190131_101857.png",
      "ProdVar":[

      ],
      "Quantity":1
   },
   {
      "ProdID":307,
      "ProdName":"Bandung",
      "ProdImage":"./Source/Product/3_20190131_101912.png",
      "ProdVar":[

      ],
      "Quantity":1
   },
   {
      "ProdID":308,
      "ProdName":"Hawaiian Breeze",
      "ProdImage":"./Source/Product/4_20190131_102006.png",
      "ProdVar":[

      ],
      "Quantity":3
   }
]

My Script:-

removeBtns(item) {
    return [
      {
        text: <Icon name='trash' style={{ fontSize: 15 }} />,
        onPress: () => this.Func_RemoveSelectedCart(item),
        type: 'delete',
      }
    ]
}
Func_RemoveSelectedCart = async (item) => {
    try {
      console.log('ITEM TO REMOVE: ' + JSON.stringify(item));
      await this._onAwaitAlert().then((response) => {
        if (response === 'OK') {
          delete appGlobal.ObjProduct[item];
          console.log('AFTER REMOVE: ' + JSON.stringify(appGlobal.ObjProduct));
        }
      })
        .catch(e => {
          console.log('promise catch ' + e);
        });
    } catch (e) {
      console.log('Unable to remove selected cart. ' + e);
    }
}
renderProductList() {
    var contents = this.state.prodData.map((item) => {
      return (
        <Content key={item.ProdID}>
          <Swipeout right={this.removeBtns(item)}>
            <Card>
              <CardItem>
                .
                .
                .
                .
              </CardItem>
            </Card>
          </Swipeout>
        </Content>
      );
    });
    return (
      <Content padder>
        {contents}
      </Content>
    )
}

Let's say I want to remove second item from cart. On console.log, it wrote:-

ITEM TO REMOVE: {"ProdID":307,"ProdName":"Bandung","ProdImage":"./Source/Product/3_20190131_101912.png","ProdVar":[],"Quantity":1}

AFTER REMOVE: [{"ProdID":306,"ProdName":"Freezing Choc","ProdImage":"./Source/Product/2_20190131_101857.png","ProdVar":[],"Quantity":1},{"ProdID":307,"ProdName":"Bandung","ProdImage":"./Source/Product/3_20190131_101912.png","ProdVar":[],"Quantity":1},{"ProdID":308,"ProdName":"Hawaiian Breeze","ProdImage":"./Source/Product/4_20190131_102006.png","ProdVar":[],"Quantity":3}]

I have tried based from search engine result on forum, discussion, tutorial:-

1: delete appGlobal.ObjProduct[item]; Nothing happen

2: appGlobal.ObjProduct.delete(item); Exception delete is not a function

3: appGlobal.ObjProduct.splice(item); It remove every data in ObjProduct

I cannot use delete using ProdID because there is variant/options that can having same ProdID but different variant/options. Example:-

[
   {
      "ProdID":301,
      "ProdName":"Mango Punch",
      "ProdImage":"./Source/Product/1_20190131_1212300.png",
      "ProdVar":[],
      "Quantity":1
   },
   {
      "ProdID":305,
      "ProdName":"Berrysome-Go",
      "ProdImage":"./Source/Product/1_20190131_101800.png",
      "ProdVar":[{
         "PVID":131,
         "PVName":"Name 1"
      }],
      "Quantity":3
   },
   {
      "ProdID":305,
      "ProdName":"Berrysome-Go",
      "ProdImage":"./Source/Product/1_20190131_101800.png",
      "ProdVar":[{
         "PVID":132,
         "PVName":"Name 2"
      }],
      "Quantity":2
   },
   {
      "ProdID":305,
      "ProdName":"Berrysome-Go",
      "ProdImage":"./Source/Product/1_20190131_101800.png",
      "ProdVar":[{
         "PVID":133,
         "PVName":"Name 3"
      }],
      "Quantity":7
   }
]

You need to use the Array.prototype.findIndex() method to get the index of the element to use in delete appGlobal.ObjProduct[index]; — Barmar
– Barmar, Commented Jan 14, 2020 at 2:21
@Barmar, do you mean while I'm mapping to render, I'm passing the index of element not the item itself? — Luiey
– Luiey, Commented Jan 14, 2020 at 2:26
You have delete appGlobal.ObjProduct[item]. item is an object, not an array index. — Barmar
– Barmar, Commented Jan 14, 2020 at 2:27

Barmar · Accepted Answer · 2020-01-14 02:31:08Z

1

You need to get the index of item in the ObjProduct array, and use that when deleting the element. You can't use item as an array index.

var index = appGlobal.ObjProduct.findIndex(e => e.ProdID = item.ProdID);
if (index != -1) {
    appGlobal.ObjectProduct.splice(index, 1);
} else {
    console.log("Item not found in appGlobal.ObjProduct");
}

You also should use splice() to remove array elements, not delete, so that the array is reindexed.

answered Jan 14, 2020 at 2:31

Barmar

789k57 gold badges554 silver badges669 bronze badges

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

1 Comment

Luiey Over a year ago

yes I have to use splice with index as you suggesting. delete is make the json become null and it not remove it e.g. Product: [{"ProdID":306... etc},null,null,{"ProdID":309... etc},{"ProdID":312... etc},{"ProdID":313... etc}]

Collectives™ on Stack Overflow

How to remove json array of object using json object in javascript?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related