Delete array items from object in localstorage - Ionic App

Question

I have an Ionic App where I am storing the data in the localStorage. The requirement is that I want to delete some items from an array in an object on the localStorage based on user click.

I have the below code but somehow not working. Please suggest where I am doing the mistake.

home.html:

<ng-container *ngFor="let item of items[0]">
    <ion-item no-lines class="items" *ngIf='this.items!= 0' (click)="deletereminder(item)">
        <ion-row>
            <ion-col>
                <h3 ion-text class="items">
                    Reminder {{item [0] + 1}}
                </h3>
            </ion-col>
            <ion-col>
                <h3 ion-text class="items">
                    {{item [1] | date:'medium'}}
                </h3>
            </ion-col>
            <ion-col style="text-align: right;">
                <h3 ion-text class="itemdelete">
                    <ion-icon name="trash"></ion-icon>
                </h3>
            </ion-col>
        </ion-row>
    </ion-item>
</ng-container>

home.ts:

 deletereminder(item){
    var newObj = JSON.parse(localStorage.getItem('Data'));
    console.log("index to delete",item);
    newObj.data.splice(item, 1)
    localStorage.setItem('Data', JSON.stringify(newObj));
  }

my localStorage looks like this:

Key   : Data
Value : {"data":[[0,"1600074900000"],[1,"1600679760000"]]}

Issue is the above home.ts is deleting the complete array instead of item clicked.

The function (click)="deletereminder(item)" returns the correct item to be deleted. example if i click on any item 0,"1600074900000", it will return 0,"1600074900000". I have checked through console.log(item).

But it is not deleting the item i am selecting. Instead it is deleting items from top of the array. example, if array has 3 records, it is deleting records from top to bottom. And also when it reaches the last record, it is not deleting the last record.

Can you post both item and the array/object you are setting in local storage so that we can have better idea to play around. — Kamran Khatti
– Kamran Khatti, Commented Sep 13, 2020 at 10:22
How is your UI looks like with your code, can you post image? — Sivakumar Tadisetti
– Sivakumar Tadisetti, Commented Sep 13, 2020 at 12:49

ng-hobby · Accepted Answer · 2020-09-13 10:28:39Z

1

You have to update the value in your localStorage. removeItem() only remove an item by key from localStorage. So Instead of deleting the key, just set it again with the new Data key:

const newObj = localStorage.getItem("Data")
Remove the index from object
localStorage.setItem("Data", newObj )

It's better that when you want to store your object on the localStorage use JSON.stringfy like this:

localStorage.setItem('Data', JSON.stringify( {"data":[[0,"1600074900000"],[1,"1600679760000"]]}));

So when you want to get the object and modify that you can do something like this:

let DataObj = JSON.parse(localStorage.getItem('Data'));

So, if you store using JSON.strinigfy() in your home.ts try this:

home.ts

deletereminder(item){
  let newObj = JSON.parse(localStorage.getItem('Data'));
  newObj.data.forEach((element, index) => {
    if(element[0] == item) {
       newObj.data.splice(index, 1)
    }
  })
  localStorage.setItem('Data', JSON.stringify(newObj));
}

edited Sep 13, 2020 at 10:28

answered Sep 13, 2020 at 9:42

ng-hobby

2,2092 gold badges17 silver badges27 bronze badges

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

7 Comments

Bongaigaon Gapps Over a year ago

I tried the below but not working. Splice is not working.

const newObj = localStorage.getItem("rp_data")          // Remove the index from object     newObj.splice(index,1);      localStorage.setItem("rp_data", newObj )

ng-hobby Over a year ago

I added some point for you to my answer. look at that. You have to use JSON.stringify() & JSON.parse() after that You will have a object of data. get the array out of it and then use splice. OK?

ng-hobby Over a year ago

I added deletereminder() function for you too. In addition your *ngFor in your template is not correct

Bongaigaon Gapps Over a year ago

I tried your query but nothing is happening. I have updated the deletereminder() and also provided issue i am facing with this new function.

Bongaigaon Gapps Over a year ago

actually the if(element[0] == item) is always false and hence not working. can you suggest?

|

Bongaigaon Gapps · Accepted Answer · 2020-09-16 17:18:13Z

0

I have got the solution with the below updated code.

In home.html, below update is done:

<ng-container *ngFor="let item of items[0];let index = index" >
    <ion-item no-lines  class="items"  *ngIf='this.allObj1 != 0' (click)="deletereminder(index)">

In home.ts, below update is done:

deletereminder(index){
    var newObj = JSON.parse(localStorage.getItem('Data'));
    var indextodelete = index;
    newObj.data.splice(indextodelete, 1)
    localStorage.setItem('Data', JSON.stringify(newObj));
    }

answered Sep 16, 2020 at 17:18

Bongaigaon Gapps

671 silver badge12 bronze badges

Collectives™ on Stack Overflow

Delete array items from object in localstorage - Ionic App

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related