How to save a data array object to ionic SQlite storage (TypeScript, Angular 5, Ionic 3)

Question

I'm trying to save a data array object with many attributes to a favorite list using Ionic SQlite storage.

For instance, I have a data array in data provider:

data.ts

     private options: any[] = [

        {
          "name": "option 01",
          "website": "www.google.com",
          "about": "choose this option 01",
          "id": "1"
        },

        {
          "name": "option 02",
          "website": "www.yahoo.com",
          "about": "choose this option 02",
          "id": "2"
        },
        {
          "name": "option 03",
          "website": "www.bing.com",
          "about": "choose this option 03",
          "id": "3"
        },
        {
          "name": "option 04",
          "website": "www.stackoverflow.com",
          "about": "choose this option 04",
          "id": "4"
        }
    ]

and I'm calling these data objects in my home html page which has an option to save to favorite list.

<ion-card *ngFor="let option of options">
  <h1>{{option.name}}</h1>
  <h1>{{option.about }}</h1>
<h4>{{option.website}}</h4>

<button ion-button block (click)="saveToFavorite()">Save to Favorite List</button>

<button ion-button block (click)="removeFromFavorite()">Remove from Favorite List</button>
</ion-card>

and here's incomplete home.ts file

import { Storage } from '@ionic/storage';

const STORAGE_KEY = 'favoriteOptions';

  saveToFavorite(option) {

    this.storage.set();
  }

  removeFromFavorite(option) {
   this.storage.remove();
  }

I want saveToFavorite() will save option data array object to a favorite options storage key so I can load them all up on a favoriteList HTML page:

<ion-content>
    <div *ngFor="let option of options">
        <h1>{{option.name}}</h1>
        <p>{{option.about}}</p>
        <button ion-button block (click)="removeFromFavorite()">Remove from Favorite List</button>
    </div>
</ion-content>

favoriteList ts file:

  getAllFavoriteOptions() {
    return this.storage.get(STORAGE_KEY);
  }

  removeFromFavorite(option) {
   this.storage.remove();
  }

Somehow I'm kinda lost. Please correct my codes on ts files.

Thanks in advance!

<button ion-button block (click)="saveToFavorite(option)">Save to Favorite List</button> For removing as well. — Vivek Gautam
– Vivek Gautam, Commented Apr 22, 2018 at 2:36
Thanks, I want to know how to save several data array objects to sqlite storage.. I can manage to save just one but whenever I try to save others, it overrides the previous one. — jamesharvey
– jamesharvey, Commented Apr 22, 2018 at 3:02

Hussein · Accepted Answer · 2018-04-28 05:56:55Z

1

make a function to save the favorites:

addFavorite(favorite:any):void{
  let favorites = this.storage.get('favorites');
  if(favorites){
    favorites.push(favorite);
    this.storage.set('favorites', favorites);
  }else{
    favorites = [];
    favorites.push(favorite);
    this.storage.set('favorites',favorites);
  }

then to get favorites add this function:

getFavorites():any{
  let favorites = this.storage.get("favorites");
  return favorites;
}

for ionic: if you are using @ionic/storage then to load items use async pipe:

getFavorites():Promise<any>{
  let favorites = this.storage.get("favorites");
  return favorites;
}

then to access them in *ngFor do this:

<div *ngFor="let item of getFavorites() | async">
      <div>{{item.name}}</div>
</div>

edited Apr 28, 2018 at 5:56

answered Apr 22, 2018 at 13:06

Hussein

1,1431 gold badge9 silver badges16 bronze badges

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

Collectives™ on Stack Overflow

How to save a data array object to ionic SQlite storage (TypeScript, Angular 5, Ionic 3)

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related