Removing an element form an array Ionic 2 Storage

Question

I have set the array of data into the storage with the key 'todo' in the data provider as

import { Injectable } from '@angular/core';
import { Storage } from '@ionic/storage';

@Injectable()
export class DataProvider {

  constructor(public storage: Storage) {
    console.log('Hello DataProvider Provider');
  }

  getData() {
    return this.storage.get('todos'); 
  }

  save(data){
    this.storage.set('todos', data);
  }

  remove(id){
    console.log("Removing data ID:",id);
    this.storage.remove(id);
  }


}

The data consists of an array with properties id, title, body as

{ id: 0, title: "lorem epsum", body: "lorem epsum" }
{ id: 1, title: "lorem epsum", body: "lorem epsum" }
{ id: 2, title: "lorem epsum", body: "lorem epsum" }
{ id: 3, title: "lorem epsum", body: "lorem epsum" }
{ id: 4, title: "lorem epsum", body: "lorem epsum" }

Now, what i am trying to do is to remove the array from the data. I want to remove an array with id 3

{ id: 3, title: "lorem epsum", body: "lorem epsum" }

I have used the storage function remove(key) to remove one array

But it is showing the error like

3 used as a key, but it is not a string.

I want to try with the title but the title of the item may not be unique. SO, i tried to remove the array using the id.

Any help will be appreciated.

Thank you.

Sterling Archer · Accepted Answer · 2018-03-23 14:21:05Z

2

Use this.storage.remove(key).The Key is the ID of the array element in the storage

edited Mar 23, 2018 at 14:21

Sterling Archer

22.5k19 gold badges86 silver badges121 bronze badges

answered Mar 23, 2018 at 13:55

Suraj Libi

5152 silver badges9 bronze badges

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

Comments

KidKode · Accepted Answer · 2018-01-24 13:15:01Z

0

Where is your storage stored at? Can you display your data in the Dom/Console? Remember if id's are not set your data then the default count always starts from 0 so 0,1,2,3 where 3 is row 4. So from this it appears you're removing key 3 and probs a key of a core/key method instead of removing row 3. An example of removing should be like so:

this.storage.remove(a => a.id).where(a.id == 3);

Or the correct syntax may be:

  this.storage.remove(this.storage.key(id));

If you show us your whole code/class we can advise better.

**EDIT*****

@Injectable()
export class DataProvider {

       constructor(public storage: Storage) {
       console.log('Hello DataProvider Provider');

   }

//Set/Instantiate data
var totalItems = this.storage.length,
stored = document.getElementById('stored'),
addButton = document.getElementById('add-button'),
subButton = document.getElementById('sub-button');

addButton.addEventListener('click', addToStorage);
subButton.addEventListener('click', removeStorage);

updateStorage(); // adds stored timestamps to #stored div

function updateStorage(){
    // Reset/update innerHTML for #stored div
    stored.innerHTML = "Stored Results<br>"

    for(item in this.storage) {
        var obj = JSON.parse(this.storage[item]);
        stored.innerHTML += obj.time + '<br>';
    }
}

function addToStorage(event) {
    // Create a new this.storage property and assign its value
    var propName = 'item' + totalItems;
    this.storage.setItem( propName, JSON.stringify( {'time': (event.timeStamp).toString(), 'target': (event.target).toString()} ) );
    totalItems = this.storage.length;

    // Add new value to #stored element
    var obj = JSON.parse(this.storage[propName]);
    stored.innerHTML += obj.time + '<br>';
}

function removeStorage() {
    // Remove the latest property from this.storage
    var propName = 'item' + (totalItems - 1);
    this.storage.removeItem(propName);
    totalItems = this.storage.length;

    // Update html to reflect changes
    updateStorage();
}


    }

This is an example I found elsewhere and the main difference could be that:

Your not setting/instatiating the key data first
Pulling ID 3 if fine but a potential clash between this ID of 3 and a key that is 3 too.
Could be that deleting key 3 is not allowed regardless of string you're trying to delete and YOU ARE trying to delete a key and not id: 3.

Try the examples but maybe look up more examples of 'Ionic CRUD' and you may succeed. Hope this helps!

edited Jan 24, 2018 at 13:15

answered Jan 23, 2018 at 15:29

KidKode

1893 silver badges12 bronze badges

5 Comments

Sujan Gainju Over a year ago

I have imported the storage from the @ionic/storage and yeah i can see the data in the console. Sorry for the confusion. the data id starts from 0. I forgot to mention the first data id and i have updated the post. I tried to use the syntax ` this.storage.remove(this.storage.key(id));` but it displayed error saying this.storage.key is not a function

KidKode Over a year ago

What about if you pass in key instead ? Check my answer updated.

Sujan Gainju Over a year ago

what does localStorage refers to? I have made the DI of @ionic/Storage to storage. So, should i use storage.removeItem(key)?? I tried doing that. But returns an error removeItem is not a function

KidKode Over a year ago

Change localStorage.removeItem(key); to this.storage.remove(key). Also does console.log('I will be deleting this ID:' + key); bring the correct ID to the console?

Sujan Gainju Over a year ago

I have tried that before posting the issue in here. and not really working. What should be the key value? I make the id of the array as the key value but not working

Collectives™ on Stack Overflow

Removing an element form an array Ionic 2 Storage

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related