JavaScript infinite loop when updating firebase Realtime database

Question

I'm trying to allow non-signed in users the ability to add items to a basket. When the button is clicked the code below is run. By default the basket value doesn't exist, so the if statement should create a value. The else statement will add 1 to existing value.

This seems to cause an infinite loop and the number in the database jumps to 1016. I've probably approached this in the wrong way and can't see how to stop this.

function addToBasket(sessionID){
  firebase.database().ref('tempUser/' + sessionID).on('value', function (snapshot) {
    var data = snapshot.val();
    
    if (data == null) {
      //update
      firebase.database().ref('tempUser/' + sessionID).set({
        basket: 1,
      });
    }
    
    else {
      //get basket number
      var currentBasket = Object.values(data);
      //turn string into a integer 
      let number = parseFloat(currentBasket) ;
      //add one to the value
      var newNumber = number + 1;
      //upload new number to db
      firebase.database().ref('tempUser/' + sessionID).set({
        basket: newNumber,
      });
    }

  });
}

Thank you in advance for any help or advice, Connor

Do you expect data to be an object or a number? Object.values is used to return an array consisting of the values within an object. parseFloat returns NAN when used against an array. if data is a number, just reference it directly. let newNumber = data + 1; if data is an object of cart items, you need to determine it's length. Try let number = currentBasket.length(); — Kevin Codes
– Kevin Codes, Commented Mar 31, 2021 at 21:53
Thanks Kevin, pointed me in the right direction. Saw the NAN return you mentioned, I was expecting it to be a number but it was an array. I have now got it working with numbers but the code still seems to keeps looping? — imconnor
– imconnor, Commented Mar 31, 2021 at 22:26

Frank van Puffelen · Accepted Answer · 2021-03-31 22:49:40Z

3

You're attaching a permanent listener to tempUser/$sessionID in your database. This means that Firebase immediately calls your callback method with the current value in the database, and then calls the same callback each time the value changes.

Since inside this call, you are changing the data with tempUser/$sessionID, that triggers the same callback again. Which then makes another change to tempUser/$sessionID, which triggers the callback again. And again, and again...

If you only want to change the value once, use once() instead of on():

 firebase.database().ref('tempUser/' + sessionID).once('value', ...

answered Mar 31, 2021 at 22:49

Frank van Puffelen

603k85 gold badges895 silver badges869 bronze badges

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

Collectives™ on Stack Overflow

JavaScript infinite loop when updating firebase Realtime database

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related