CODEWITHSUNDEEP
javascripthtmlfirebasefirebase-realtime-database
Tommy John
Tommy John

Reputation: 84

FIrebase jQuery .on method is updating array values one by one rather than all at once

I am trying to update the values of the orders placed by users on the Corporate's page without a refresh. For this, I used the jQuery .on method. However, this returns the values in the array that I generated for the orders one by one rather than all at once. Is this just an issue with firebase or is it just my code.

Here is my code:

When I get the values: 

 firebase.database().ref('Orders/' + user_id).on('value',  function(snapshot) {
     // Check if the user has any pending orders 
     if (snapshot.val() === null) {
         // No Pending Orders are Present
          $('.order_content-parent').html(' <div class="order_content">Hooray! You have no pending orders!</div>');

     } else {

         // One or more pending orders are present


          console.log(snapshot.val());


      snapshot.forEach(function(child){
           $('.order_content-parent').html(' <div class="order_content"></div>');

          var order = child.val().Order;

var key = child.key;
  console.log('Key is : '+key);
  getOrders(key);

});

When I insert the values into the database: 

firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
     var myId = user.uid;
     const orders = ['Orders: '];
     $('.postData').each(function() {
    var data = $(this).html();
    orders.push(data);
    var database = firebase.database();
       database.ref('Orders/' + user_id + '/' + myId).set({
    Order: orders
  }, function(error) {
    if (error) {
      // The write failed...
      alert(error);
    } else {
         $('.postData').html('Connecting...');

    }
  });
     database.ref('Orders/' + myId).set({
    Order: orders,
    For: user_id
  }, function(error) {
    if (error) {
      // The write failed...
      alert(error);
    } else {
         $('.postData').html('Order Successfully Placed!');

    }
  });
  });
  } else {
    // No user is signed in.
  }
});

Here is my console when I print the values from the database:

This is my console. As you can see my code is running twice because the machine thinks it was updated twice, but it should only update once because I am inserting the data all at once

Here is my database structure:

This is my database structure, as you can see all the data is entered correctly at the same time

Can anyone help

Thanks in advance,

Tom

Upvotes: 0

Views: 39

Answers (1)

mtflud
mtflud

Reputation: 866

I think this is expected behaviour, as the documentation states:

The value event is called every time data is changed at the specified database reference, including changes to children.

Since your inserts are on a each loop, they get inserted one by one, triggering the .on() listener multiple times.

You could try inserting all the orders at once. Please try this approach and let me know if it works:

firebase.auth().onAuthStateChanged(function (user) {
    if (!user) {
        console.log("No user is signed in");
        return;
    }
    var myId = user.uid;
    var orders = [];

    // Get the orders to insert first
    $('.postData').each(function () {
        var data = $(this).html();
        orders.push(data);
    });

    // Then, insert them all at once
    var database = firebase.database();
    database.ref('Orders/' + user_id + '/' + myId).set({
        Order: orders
    }, function (error) {
        if (error) {
            // The write failed...
            alert(error);
            return;
        } 
        $('.postData').html('Connecting...');
        database.ref('Orders/' + myId).set({
            Order: orders,
            For: user_id
        }, function (error) {
            if (error) {
                // The write failed...
                alert(error);
                return;
            } 
            $('.postData').html('Order Successfully Placed!');
        });
    });
});

Upvotes: 1

Related Questions