Ionic, FireBase: Deleting favourites from a list of favourites

Issue

I am trying to solve this current code of mine which allows user to add favourites to a list and delete them. Adding them is not an issue but deleting individually is a headache. I am not sure what is wrong with my code.

favourites.page.ts

delete(item_key: any) {
    var userId = firebase.auth().currentUser.uid;
    console.log(item_key);
    return firebase.database().ref('fav/' + userId).child(item_key).remove();

  }

favourites.page.html

<ion-row>
    <ion-col>
      <ion-card class="favCard" *ngFor="let item of fav; let i = index">
        <img (click)="direct(item.name)" src="{{ item.photo }}">
        <div class="info">
          <h2 class="name">{{ item.name }}</h2>
          <h3 class="cuisine">{{ item.cuisine }}</h3>
          <ion-button class="delete" (click)="delete(item.name)">Delete</ion-button>
        </div>
      </ion-card>

    </ion-col>
  </ion-row>

Firebase Database:

{
  "fav" : {
    "Hp9xMZzRMDRZnbW3sg8Zhhj6OMz2" : {
      "beehoon" : {
        "country" : "Influenced by China",
        "cuisine" : "Chinese",
        "history" : "Rice vermicelli are a part of several Asian cuisines, where they are often eaten as part of a soup dish, stir-fry or salad. It also widely known in Asia by cognates of Hokkien 米粉（pronounced as bi-hun).",
        "name" : "Bee Hoon",
        "photo" : "https://firebasestorage.googleapis.com/v0/b/fyp-ionic-ad9e9.appspot.com/o/BreakfastCards%2Fbeehoon.jpg?alt=media&token=cfda6997-d2fb-49c0-b89e-e90f0519546f",
        "varieties" : "Pair up with sunny side up, luncheon meat and some good savoury Sambal chili.",
        "what" : "Also known as rice vermicelli, it is part of the rice noodles family. A loaded plate of stir-fried bee hoon piled with items such as fish cakes, sunny side ups and many more is a breakfast sight familiar to many Singaporeans."
      }
    },
    "SPl5PRkl6sYgn7KsAqqs9LhlhwB2" : {
      "beehoon" : {
        "country" : "Influenced by China",
        "cuisine" : "Chinese",
        "history" : "Rice vermicelli are a part of several Asian cuisines, where they are often eaten as part of a soup dish, stir-fry or salad. It also widely known in Asia by cognates of Hokkien 米粉（pronounced as bi-hun).",
        "name" : "Bee Hoon",
        "photo" : "https://firebasestorage.googleapis.com/v0/b/fyp-ionic-ad9e9.appspot.com/o/BreakfastCards%2Fbeehoon.jpg?alt=media&token=cfda6997-d2fb-49c0-b89e-e90f0519546f",
        "varieties" : "Pair up with sunny side up, luncheon meat and some good savoury Sambal chili.",
        "what" : "Also known as rice vermicelli, it is part of the rice noodles family. A loaded plate of stir-fried bee hoon piled with items such as fish cakes, sunny side ups and many more is a breakfast sight familiar to many Singaporeans."
      },
      "toast" : {
        "country" : "Influenced by China, Malaysia",
        "history" : "It was believed that Kaya toast originated with Hainanese people who worked on British ships as cooks. Eventually, these cooks settled in Singapore and started selling their food to the  locals. Wanting to create some uniqueness, the locals replaced the British jams with local coconut spread.",
        "name" : "Kaya Toast",
        "photo" : "https://firebasestorage.googleapis.com/v0/b/fyp-ionic-ad9e9.appspot.com/o/BreakfastCards%2Ftoast.jpg?alt=media&token=73e1a793-3002-4db2-97fb-4e3271ec2e93",
        "varieties" : "Cracker kaya toast, steamed kaya toast, French kaya toast",
        "what" : "Kaya toast is a well-known breakfast snack in Singapore and Malaysia. Kaya toast is prepared with kaya (also known as coconut jam) and butter, generally served on toast. It is considered a breakfast staple and remains popular in Singapore. "
      }
    }
  }
}

In this image I am trying to delete 'beehoon', however whenever i press the delete button, it is not deleted from the list and database. Thus, it is still in the favourite lists.

Much help is appreciated. Thanks

Solution

To delete a node from the database you must call remove() on a reference to its exact path. So if you want to remove the beehoon node under the first child in your JSON, you must call remove on /fav/Hp9xMZzRMDRZnbW3sg8Zhhj6OMz2/beehoon.

When the user clicks to delete the item, you call delete(item.name). So in the first node in your JSON that would translate to Bee Hoon. And then in the delete function that would become:

firebase.database().ref('fav/' + userId).child("Bee Hoon").remove();

But there is no node /fav/Hp9xMZzRMDRZnbW3sg8Zhhj6OMz2/Bee Hoon, since the node is called /fav/Hp9xMZzRMDRZnbW3sg8Zhhj6OMz2/beehoon

I'm not sure how you populate the fav that is used in let item of fav, but you'll need to ensure that each item also contains the key of its node. You'd then inject that key into the HTML in the call to delete, like delete(item.$key).

Answered By - Frank van Puffelen