Retrieving the updated list after a child has been deleted from the Firebase Database

Question

Retrieving the updated list after a child has been deleted from the Firebase Database

According to the documentation, the DataSnapshot received in the child_removed callback contains the old data for the removed child.

I have a scenario where I am adding data using push and then trying to access the next value after the top child is removed from my database. Here is what I have attempted so far:

var ref = firebase.database().ref("Windsor boyss").limitToFirst(1);
    ref.on("child_removed", function(snapshot) {
        ref.once("value", function(snapshot) {
            snapshot.forEach(function(childSnapshot) {
                console.log("Child is ", childSnapshot.val);
            });
        });
    });

For instance, if the username 'javedh' is removed, the EventListener should trigger and print Child is tjaved, which is the new top value in the database after the removal.

https://i.sstatic.net/z7kWA.png

I'm seeking assistance in finding an effective solution to this issue. Thank you!

javascript firebase firebase-realtime-database

Answer 1

Answer №1

Doug made a point about how using a nested listener on the same reference is quite uncommon.

The more common approach would be something like this with on("value":

var ref = firebase.database().ref("Windsor boys").limitToFirst(1);
ref.on("value", function(snapshot) {
    snapshot.forEach(function(childSnapshot) {
        console.log("Child is ", childSnapshot.val);
    });
});

Update: It seems that the issue might stem from the fact that your ref.once("value" is being retrieved from the local (in memory) cache of the snapshot, which at that moment contains no data.

I managed to find a workaround by creating a new query to listen to within the callback, instead of listening to the same query (which you referred to as ref):

var ref = firebase.database().ref("Windsor boys");
var query = ref.limitToFirst(1);
query.on("child_removed", function(snapshot) {
  console.log("Child "+snapshot.val()+" was removed");
  ref.limitToFirst(1).once("value", function(snapshot) {
    snapshot.forEach(function(childSnapshot) {
      console.log("First child is "+childSnapshot.val());
    });
  });
});

To see it in action, check out the complete test bed here: https://jsbin.com/feqojey/edit?js,console

Note that there was a missing pair of () after val() in the loop, although that wasn't the root cause of the problem.

Answer 2

Doug made a point about how using a nested listener on the same reference is quite uncommon.

The more common approach would be something like this with on("value":

var ref = firebase.database().ref("Windsor boys").limitToFirst(1);
ref.on("value", function(snapshot) {
    snapshot.forEach(function(childSnapshot) {
        console.log("Child is ", childSnapshot.val);
    });
});

Update: It seems that the issue might stem from the fact that your ref.once("value" is being retrieved from the local (in memory) cache of the snapshot, which at that moment contains no data.

I managed to find a workaround by creating a new query to listen to within the callback, instead of listening to the same query (which you referred to as ref):

var ref = firebase.database().ref("Windsor boys");
var query = ref.limitToFirst(1);
query.on("child_removed", function(snapshot) {
  console.log("Child "+snapshot.val()+" was removed");
  ref.limitToFirst(1).once("value", function(snapshot) {
    snapshot.forEach(function(childSnapshot) {
      console.log("First child is "+childSnapshot.val());
    });
  });
});

To see it in action, check out the complete test bed here: https://jsbin.com/feqojey/edit?js,console

Note that there was a missing pair of () after val() in the loop, although that wasn't the root cause of the problem.

Retrieving the updated list after a child has been deleted from the Firebase Database

Answer №1

Similar questions

The JavaScript code is failing to retrieve any data from the API

Executing JavaScript in HttpClient or HtmlUnitHow to trigger javascript in HttpClient or HtmlUnit

What is the process for adding a Contact Us page to a website?

Different ways to save data fetched from a fetch request

Performing multiple asynchronous tasks using RxJS by running Array.prototype.map in parallel batches or queues

Access array information using AngularJS

Troubleshooting the issue of AngularJs location.path not successfully transferring parameters

Error thrown in JavaScript when calculating the distance

Could this be a problem within my recursive function?

Having trouble with nodeJS when running the command "npm install"?

Managing memory in UIWebView when rendering THREE.js scenes

Angular directive: inability to pass ng-repeat item through isolate scope

What is the reason behind the ability to access the result of a redux call "immediately" by wrapping it into a promise?

Is there a way to prevent the jsonPayload in stackdriver from automatically converting to a struct format?

flatpickr allows you to synchronize the dates of two date pickers by setting the date of the second one to match the date

Experience the seamless integration of Restful APIs with AngularJS and Querystring parameters

The Coinbase Pay application fails to compile properly due to a missing Babel loader

Transform the array into an object containing corresponding key-value pairs

Ways to display certain JSON elements

Struggling to capture an error generated by Sequelize within a universal Middleware block