How to fetch data from ionic storage using *ngFor?

#1

Hello guys,

I’m using Ionic’s storage to save javascript data object which has several attributes. I’m trying to create a favorite list which can fetch data from ionic storage.

Here’s 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"
 }
]

and I’m saving items on my html file using a button. the main HTML file is using *ngFor let of directive to fetch the items from the provider.

Main HTML:

<div *ngFor="let item of items"> 
  <h2>{{tem.name}}</h2>  
  <p>{{item.description}}</p>
  <button (click)="saveToFav(item)">Save to favorites</button>
</div>

Main TS file:


savToFav(item) {
this.storage.set(this.item.id, this.item);
}

This saves the item with its attributes to Ionic storage. I can see that showing up on my browser’s inspect -> application page.

and I’m trying to fetch items from ionic storage to a favorite HTML page.

Favorite HTML page:


  <div *ngFor="let item of items"> 
      <h2>{{tem.name}}</h2>  
      <p>{{item.description}}</p>
      <button (click)="remove(item)">Remove from favorites</button>
    </div>

Favorite TS file


    this.platform.ready().then(() => {
    this.storage.get(this.item);
});

But this really doesn’t load anything on favorite html page…

What should I do to fetch every item stored in Ionic storage to favorite HTML page?

Thanks in advance,

#2

Define an Observable using storage.get and fromPromise(). Display that in the template using ngFor and the async pipe.

#3

I can’t code that using fromPromise and async pipe … how would you do that? I haven’t used them in previous projects yet.

Thanks,

#4

I’m going to assume that you’ve stored a serializable array to storage key itemArray. Informally, what this means is an array of simple things. Not Dates, not fancy Objects. Array of strings, numbers, simple Objects. Let’s just assume an array of strings.

let example: Observable<Array<string>> = this.storage.get(itemArray).fromPromise();

You can keep your html the same except for the first line
<div *ngFor="let item of items | async">

#5

Thanks, I will try this method. I have to study Async Pipe to fully understand this.

I don’t know what you mean by serializable array… Ionic storage doesn’t save more than a single item value to each id, key.
How can I create a serializable array based on the example above? The example of item data array in my post is similar to what I’m actually building.

#6

Can’t you translate an array to a JSON object and store that? You might need to translate back from JSON, so maybe I missed a step, but I’m pretty sure anything JSON can be stored.

#7

hmm I think I’ve seen that example on Ionic conference demo app. It has ionic storage with json data array with save to favorite feature.
Let me check that out to understand how this works.

Thanks again for explanation!

#8

BTW I think you should Google serializable sooner rather than later, because that affects what can and can’t be translated into JSON. if your data structure is not serializable, you’ll have to do more sophisticated things.

#9

https://www.newtonsoft.com/json/help/html/SerializingJSON.htm

Thanks, I’m working with about 1,000 items.