How to display stored items on HTML using Ionic storage (Ionic 3, Angular 5, Cordova)

Question

I'm using Ionic storage to save items to SQlite database. Here's a list of items I can save from my data provider TS file:

  private items: any[] = [

    {
   "name": "item 01",
   "description": "this is item 01",
   "id": "1"
   },
    {
   "name": "item 02",
   "description": "this is item 02",
   "id": "2"
   },
    {
   "name": "item 03",
   "description": "this is item 03",
   "id": "3"
   },
   {
"name": "item 04",
 "description":"this is item 04",
 "id":"4"
 }
]

when I save them using

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

I can see them perfectly stored with unique key value. Each item gets 'item (item number)' as a key and get its contents stored to ionic storage.

I can even call them up on console.log.. But how can I call them up on an html page? Is there any way to display all stored data from ionic storage on an html page? ideally by using {{item.name}}, {{item.description}}

Thanks,

Answer 1

Since you are using Ionic Storage, you may know that this.storage.get('item-key') returns a promise.

So I would suggest that you create an instance property of type

items : Array<string>  = new Array<string>();

then in your ngOnInit

ngOnInit(){
   this.storage.get('key').then(
       (value) => {
        this.items.push(`${key} : ${value}`)
      }
   );
}

in your template a simple *ngFor="let item of items" will do