Entire Firebase Database is Dropped When Attempting to Delete a Single Child

Question

My entire Firebase Database is being dropped when attempting to a Delete Single Child from the Parent. My code is not effectively targeting the child record. [Angular 2 | Google Firebase]

HTML Section where Delete Button is Called This section cycles through all of the Profiles in the Firebase database and prints them to screen. I placed a delete button and included profile.key to pass the key value for the child profile to the fbRemoveProfile function.

<ul id="profile-listing">
  <li *ngFor="let profile of profiles">

    <div class="single-profile" style="text-align: center">
        <p>First: {{profile.firstname}}<br>
        Last: {{profile.lastname}}<br>
        Email: {{profile.email}}<br>
        Phone: {{profile.phone}}<br>
        Industry: {{profile.industry}}</p>
        <input type="button" value="Delete" class="btn btn-xs btn-danger" (click)="fbRemoveProfile(profile.key)">
        <hr>
    </div>
  </li>
</ul>

Remove/Delete Function Definition

Here I am calling fbRemoveProfile. My console.logs show all snapshot.keys for the Firebase database when the delete button is depressed. I am unable to isolate the targeted profile key to the console. In either case, I am executing a general remove(); call which is dropping the database. Any recommendations would be much appreciated.

  fbRemoveProfile(key){
    firebase.database().ref('/').on('child_added', (snapshot) =>{
      console.log('Delete button pressed')
      console.log(snapshot.key)
      snapshot.ref.remove();
    });
  }

cartant · Answer 1 · 2017-01-17T01:55:43.720

1

Your fbRemoveProfile function removes the entire database because the child_added event on ref('/') will:

be triggered once for each initial child at this location, and it will be triggered again every time a new child is added.

So remove is called on every child of ref('/'), deleting your database.

Instead, your function should be something like this:

fbRemoveProfile(key) {
  return firebase.database().ref('profiles').child(key).remove();
}

Note that the child method is used to obtain the child ref that's to be removed. This is safer than building a path to be passed to ref, as the argument passed to child is not allowed to be an empty string.

edited Jan 17 '17 at 01:55

answered Jan 16 '17 at 23:30

cartant

57,105
17
163
197

I gave your recommendation a try but it is still deleting all entries in the database. I moved the branch of the database so that the post profile function goes to "firebase.database().ref('/profiles')" I amended the fbRemoveProfile(key) function to match this target ref, but it is still deleting all records on that branch. I think there must be something wrong with the storage of the key value in the loop *ngFor="let profile of profiles" where I am calling for fbRemoveProfile(profile.key) When I call console log on it I dumps all the values as if the method is being called multiple times – Chadington Jan 17 '17 at 01:26
I've updated the answer. It sounds like you are right re: `profile.key`. Exactly what's stored in that property is not apparent from your question, but if it's the name of the key under `profiles` using the `child` method to obtain the ref to remove would be safer. – cartant Jan 17 '17 at 01:57
I tried with the updated "...les).child(key).remove()" but the webapp blows up with the following: error_handler.js:50 EXCEPTION: Error in ./AdminProfilelistComponent class AdminProfilelistComponent - inline template:19:12 caused by: Firebase.child failed: First argument was an invalid path: "undefined". Paths must be non-empty strings and can't contain ".", "#", "$", "[", or "]" I will continue to troubleshoot and look for other ways to isolate the key being passed via the ngFor loop. The keys are there, just not getting extracted individually. – Chadington Jan 17 '17 at 02:54
Per this article, looks like there is something going on preventing isolation "gFor will iterate over the keys, binding the repeated template to the current key in the array." https://webcake.co/object-properties-in-angular-2s-ngfor/ – Chadington Jan 17 '17 at 02:58
It's supposed to blow up if the key is invalid, so that's good news. Much better than removing everything! – cartant Jan 17 '17 at 03:05
Found this... getting warmer --> http://stackoverflow.com/questions/35534959/access-key-and-value-of-object-using-ngfor – Chadington Jan 20 '17 at 05:37

Entire Firebase Database is Dropped When Attempting to Delete a Single Child

1 Answers1