After storing item in storage it is not removing when pressed delete item button

Ionic Framework ionic-v3
1

Whenever i add any product in wishlist , i can not remove it from wish list unless i log out or clean storage.
the same code i use in for CheckoutCart in that i can add as well as remove products from Checkoutcart array storage.
wish.html


<div class="heading uppercase">
      Products in Your Wishlist
</div>


  <div class="width50" *ngFor="let object of wishdata" text-center style="height:250px">
    <ion-icon name="close-circle" class = "topright" (click)= "deleteitem(object)"></ion-icon>
    <img src="{{object.images[0].src}}" style="height: 70%" (click)="navigateToPage(object.id, object)" />
    <div class="product-name uppercase" padding-top padding-horizontal text-nowrap style="min-width: 0; overflow: hidden; text-overflow: ellipsis;">{{object?.name}}</div>
    <span class="price" *ngIf="object?.meta_data[14]?.key == 'inApp'">&#8377; {{object?.meta_data[14]?.value}}</span>
    <span class="price" *ngIf="!object?.meta_data[14]?.key != 'inApp'">&#8377; {{object?.price}}</span>
  </div>

</ion-content>

Wish.ts code for deleteitem()

async deleteitem(object){
    var index = this.wishdata.indexOf(object);
    if (index > -1) {
      this.wishdata.splice(index, 1);
      await this.storage.set('products', this.wishdata);
    }
    this.navCtrl.setRoot(this.navCtrl.getActive().component);
  }

Cart.html

<div class="width50" *ngFor="let object of cartdata" text-center style="height:250px">
    <ion-icon name="close-circle" class = "topright" (click)= "deleteitem(object)"></ion-icon>
    <img src="{{object.images[0].src}}" style="height: 70%" />
    <div class="product-name uppercase" padding-top padding-horizontal text-nowrap style="min-width: 0; overflow: hidden; text-overflow: ellipsis;">{{object?.name}}</div>
      <span class="price" *ngIf="object?.meta_data[14]?.key == 'inApp'">&#8377; {{object?.meta_data[14]?.value}}</span>
      <span class="price" *ngIf="!object?.meta_data[14]?.key != 'inApp'">&#8377; {{object?.price}}</span><br/>
</div>

cart.ts delete item function

async deleteitem(object){
    var index = this.cartdata.indexOf(object);
    if (index > -1) {
      this.cartdata.splice(index, 1);
      await this.storage.set('products', this.cartdata);
    }
    this.navCtrl.setRoot(this.navCtrl.getActive().component);
  }

Can any1 help what am i doing wrong as the code is similar for both the carts but one works and one does not ?

2

Hi, @aditbharadwaj
In your wish.html file, you wrote

<ion-icon name=“close-circle” class = “topright” (click)= “deleteitem(object)”></ion-icon>

here you have used “**” before and after deleteitem(object) I think that is the mistake done by you. you can also see in the cart.html file you didn’t use it there.

I hope it will solve your problem.

3

ohh no i added the “**” in the post to make it look bold my bad i will remove it its not in the code
i apologies for confusion

EDIT:- i updated the code

4

Okay as you said that was the confusion one more thing I have noticed that you have used same key for storing wish data as well as cart data in storage.
So, I am not sure but I would suggest you to use different keys such as "wish products"for wish data and “products” for cart data.

1 Like
5

yea that was the issue i was using the same key for storing data so the splice wasn’t able to edit the proper storage i was aiming for. i changed the key and it works now thank you so much :+1: