How to display stored item on html (Ionic storage)


#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


#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


#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;


#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 {

}


#9

Its definitely up there.


#10

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

Thanks again!


#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',
})

#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);
     })

#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


#15

Fantastic! Happy to have helped.


#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