How to display stored item on html (Ionic storage)

Ionic Framework ionic-v3
1

Hello guys,

I have several items stored in ionic storage.
How can I display each of them on an html page?

Each item has key, value, id. They’re javascript data objects with several attributes.

I saved them using:
this.storage.set(item ${ this.item.id }, this.item);

and I know I can call them up using this.storage.get… but this doesn’t have documentation on how to display those items on a page.

I think I can use {{ item.name }} or something similar to display them…

or is there a way to display storage item value from console.log?

this.storage.forEach( (value, key, index) => {
	console.log("This is the value", value)
	console.log("from the key", key)
	console.log("Index is" index)
})

works fine and it can load value of each item to console.log. I don’t know what’s problem with not being able to use the value on html page.

Please help.

Thanks,

2

Just assign the result of your storage.get() to an array and reflect that array in your template.

i.e,

storageItems: Array<StorageItem>;

In constructor:

this.storageItems = [];

Template:

*ngFor="let item of storageItems"

Then populate from Storage

1 Like
3

The way i like is convert array of json into string and store it and during fetching convert string to json
Use json.parse() and json.stringify().
Then use ngfor in template

1 Like
4

Thanks for your reply!

I still have problem assigning the array correctly…
How would you assign this array to below example?
storageItems: Array

  ionViewDidLoad() {
    


      this.storage.get('item ' + this.item.id).then((value) => {
       
        this.storageItems
      });
 
  }

Sorry. I’m having hard time with ionic storage… any working example would be appreciated.

5

I tried it but it didn’t work.
How would you use json.stringfy() and parse() in my example?
When I use JSON.parse(value), I get an error message:

Uncaught SyntaxError: Unexpected token o in JSON at position 1
    at JSON.parse (<anonymous>)
6

What I would do is create a custom interface.

interface StorageItem {
 key: string,
 name: string

Or whatever your items entail.
Then I would follow along with my initial advice plus

 this.storage.get('item ' + this.item.id).then((value) => {
        this.storageItems = value;
      });

If you’re just getting one item, just change

storageItems: Array<StorageItem>

To
storageItem: StorageItem;

1 Like
7

Yes, that’s like creating a model.
Thanks again! I will try it.
I think ionic storage is definitely the least developer friendly part of ionic. It’s like guess and try ill it works.

8

Yeah, its a lot of extra code to do effectively, but once you’re in the habit of creating interfaces for everything, it’ll change your life

I create them for absolutely everything now.

I have a provider in every app that solely holds interfaces.

Difference being that in a provider, add export. I.e.
export interface StorageItem {

}

1 Like
9

Its definitely up there.

1 Like
10

I’m working on the interface now and hopefully it works out.

Thanks again!

1 Like
11

No problem. Here’s where you would want to put that interface

import { Subject } from 'rxjs/Subject';
import { first, takeUntil } from 'rxjs/operators';

interface StorageItem {
 key: string,
 name: string
}

@IonicPage()
@Component({
  selector: 'page-code-creation',
  templateUrl: 'code-creation.html',
})
1 Like
12

Thanks for everything but it’s still not working.

I’m loading the data provider in the first example on a item list html page using *ngFor.

<div *ngFor="let item of items">
  <h1>{{item.name}}</h1>
<button (click)="saveToFav(item)">Save to Fav</button>
</div>

and here’s my item list page TS:

saveToFav(item) {
    this.storage.set(`item ${ this.item.id }`, JSON.stringify(this.item));
                  this.isFavorite = true; }

This saves item with its unique key id and all attributes…

and I created interface for items.

Here’ favorite page TS which I’m trying to load all items:

import { Component } from '@angular/core';

import { NavController, NavParams, Platform } from 'ionic-angular';
import { Storage } from '@ionic/storage';
import { Observable } from 'rxjs/Observable'
import {StorageItem } from './storageitem';
@Component({
  selector: 'page-favourites',
  templateUrl: 'favourites.html'
})


export class FavouritesPage {

  isFavorite = false;
  submitted: boolean = false;
  item: any;
  key: any;
 
  storageItems: Array<StorageItem>;  
  
  constructor(
    public platform: Platform,
    private storage: Storage,
    public navCtrl: NavController,
    public navParams: NavParams,
    
  ) {
 

    this.storageItems = [];
   
  }

  

  ionViewDidLoad() {

  
    this.storage.forEach( (value) => {
      this.storageItems = value;
     })
  

}

and favorite page html:

<div *ngFor="let item of storageItems">
  <h1>{{item.name}}</h1>
</div>

I’m just error messages
ERROR Error: Error trying to diff ''. Only arrays and iterables are allowed

Any idea?

I can still see items stored in Chrome’s inspect -> application -> webSQL page.
and I can call items up in console too. So it’s saving items correctly… but they can’t be parsed.

Thanks in advance.

13

Using that method, youd want to push the items into storageItems.

this.storage.forEach( (value) =&gt; {
      this.storageItems.push(value);
     })

And may need to do

this.storage.forEach( (value: StorageItem) =&gt; {
      this.storageItems.push(value);
     })
1 Like
14

unbelievable!

It’s working! thanks a lot Jaydz.

this.storage.forEach( (value) => {
      this.storageItems.push(value);
     })

this worked and I had to change *ngFor

<div *ngFor="let value of storedItems">
    <h1>{{value.name}}</h1>
</div>

Now it’s showing a list of store value’s names.

You totally made my day! thanks

1 Like
15

Fantastic! Happy to have helped.

1 Like
16

@jaydz how would you remove a value in this set up?

removeFav(key) {
this.storage.remove(key);
this.isFavorite = false;
}

can’t remove a selected value from storage…

17

Is there anyone who knows how to delete an item from this set up?
I’m kinda stuck with this issue. splice() and pop() both didn’t work.

this.storage.remove(item ${ this.item.id }} throws an error 'can’t read property of undefined