Search code examples
angularionic4ionic-storage

Add an object (json) with a boolean to ionic storage (ionic 4)


i want to add a special favorite to my storage, i can add the number of favorites I want to my storage but i want only 1 is my top favorite ! There is an image to underline you my mind !

I want to be able to store as many as one favorite (qualify by the house) and the others are normal favorites (hearts). I show you some code and explain it better.

search.page.ts

    getItems(ev) {
    this.loadFavorites();

    var val = ev.target.value;

    if (val && val.trim() != '') {
      this.storageService.getFavorites().then(favorites => {
        this.favorites = this.favorites.filter((favorite) => {
          return (favorite.adresse.toLowerCase().indexOf(val.toLowerCase()) > -1);
        });
      });
    }
  }

  @ViewChild('mylist') mylist: IonList;

  // CREATE
  addFavorite(adresse: string, lat: string, lon: string) {
    this.newFavorite.adresse = adresse.replace(/[, ]+/g, " ").trim()
    this.newFavorite.lat = lat
    this.newFavorite.lon = lon
    this.newFavorite.modified = false;
    this.newFavorite.id = Date.now();

    this.storageService.addFavorite(this.newFavorite).then(favorite => {
      this.newFavorite = <Favorite>{};
      console.log(this.newFavorite.adresse)
      this.showToast('Favorite added!');
      this.loadFavorites()
    });
  }

  addFavoriteHome(adresse: string, lat: string, lon: string) {
    this.newFavorite.adresse = adresse.replace(/[, ]+/g, " ").trim()
    this.newFavorite.lat = lat
    this.newFavorite.lon = lon
    this.newFavorite.modified = true;
    this.newFavorite.id = Date.now();

    this.storageService.addFavorite(this.newFavorite).then(favorite => {
      this.newFavorite = <Favorite>{};
      this.showToast('Favorite added!')
      this.loadFavorites()
    });

  }

You can see on this code, when i add a new favorite home, its add this.newFavorite.modified = true; and it is false for normal favorites.

I can easy add a new and delete it but i want to put a limit, i want only one object can have this.newFavorite.modified = true;.

search.page.html

<ion-list mode="md" #mylist>
        <div *ngFor="let favorite of favorites">

            <ion-item mode="md">
                <ion-label text-wrap>
                    <p>{{favorite.modified}}</p>
                    <h3 routerLink="/home/{{favorite.adresse}}">{{ favorite.adresse | slice:0:30 }}...</h3>
                </ion-label>
                <img *ngIf="favorite.modified" (click)="addFavoriteHome(favorite)" src="../../assets/icon/home-full.svg" style="width: 35px;" alt="">
                <img *ngIf="!favorite.modified" (click)="addFavorite(favorite)" src="../../assets/icon/home.svg" style="width: 35px;" alt="">
                <ion-icon name="heart" (click)="deleteAlert(favorite)" end></ion-icon>
            </ion-item>
        </div>

    </ion-list>

Solution

  • I did a forEach method to update all favorite 1 by 1, and it works !

         this.favorites.forEach((favorites, index) => {
            console.log(favorites)
            if (favorites.modified == true) {
              favorites.modified = false
              this.storageService.updateItem(favorites)
              this.storageService.getFavorites().then(favorites => {
                this.favorites = favorites;
              });
            }
          })