21185

Firebase child_added event listener returning duplicate data

Question:

I am using Firebase child_added to watch for new entries being added to my database.

It seemed to work for a while but then I noticed some issues when leaving the connection idle. If I leave my app open for a prolonged period of time when Firebase returns duplicates. I think it maybe down to the connection being dropped and then established.

Here is my code.

getVoicemailList: function() { var self = this; var userId = firebase.auth().currentUser.uid; firebase.database().ref('voicemails/' + userId).on('child_added', function(snapshot) { var voicemail = snapshot.val(); self.addToCollection(voicemail.callerID, voicemail.timeReceived, voicemail.transcription, voicemail.audioURL); }); }, addToCollection: function(callerID, timeReceived, transcription, audioURL) { console.log(callerID) var collectionList = $('.collapsible').length; if(!collectionList) { $('#main-content').append('<ul class="collapsible" data-collapsible="accordion"></ul>') } var output = '<li>'; output += '<div class="collapsible-header"><i class="material-icons">filter_drama</i>'+callerID+'</div>'; output += '<div class="collapsible-body">'; output += '

<audio id="source" controls>'; output += '<source src="'+audioURL+'" type="audio/mpeg">'; output += '</audio>

'; output += '

'+timeReceived+'

'; output += '

'+transcription+'

'; output += '</div>'; output += '</li>'; $('.collapsible').append(output); $('.collapsible').collapsible(); },

Answer1:

If I understand your issue correctly, then it's something I've come across a few times. I believe the trick is to .empty() the existing data from within the .on call.

As an example, on my site we have goals that users can add. When they add a new <em>Goal</em> the .on call adds a new <em>Goal</em> to the bottom of their list.

I was having an issue where deleting a <em>Goal</em> would then duplicate the UI data.

In order to address the issue, I moved $(#goals").empty(); to within the .on call.

firebase.database().ref('users/' + user).on('value', function(snapshot) { $("#goals").empty(); // This removes all all previously added goals snapshot.forEach(function(data) { var id = data.key; var desc = data.val().desc; var url = data.val().url || "https://unsplash.it/400?image=" + getRandomNumber(); displayGoal(id,desc,url); }); // If you need to append anything after all the data has been added you can do it here. e.g. $("#goals").append("</div>"); });

I suspected that doing this would force all relevant UI items to reload but they don't. If I add a <em>Goal</em> it just pops up on the bottom of the list, if I remove a <em>Goal</em> the UI just removes the goal without any reloading or duplication.

So in your case you would add $('.collapsible').empty(); after the .on call and before var voicemail = snapshot.val();.

Note: Previously I would call $("#goals").empty() prior to the .on call.

Recommend

  • How can I display my Twilio number for inbound calls
  • finding speed and tone of speech in an audio using python
  • Can I determine which Submit button was used in javascript?
  • Why does an error still show when I specify -ErrorAction SilentlyContinue?
  • Prepend WAV Header in NAudio
  • Execute dialplan context from command line
  • Easy DAWG creation algorithm?
  • Failed to convert parameter value from a String to a Decimal?
  • Twilio Say Verb during a phone call
  • How to intercept and translate USB events
  • How to provide row updates to table in Azure SQL DW using SSDT?
  • cannot play iPad over https
  • Angular2 emit event up to the DOM tree
  • What's wrong with `var myEval = eval; myEval(“2+2”)`
  • Angular - How to access and replace innerHTML from a directive
  • VB.NET 2012 Property Set on Property Get
  • Checking if the Faye server exists before running it for my Rails app
  • IE11 textarea loses focus if another textarea is disabled
  • Rails 5 - Google Maps - Javascript error - initMap is not a function - fixing one js issue creates a
  • What is the best way to debug Bootstrap.groovy?
  • d3.js: why is d3.geo.path() giving NaN?
  • if some function is not optimized does it mean that all functions where it is declared are not optim
  • How dotnet build chooses the output name
  • How can I let users share their location in Bot Framework webchat channel?
  • Create function that can pass a parameter without making a new component
  • Dynamically load css stylesheet and wait for it to load
  • Access object instance inside an event handler
  • Cannot save model when using ember render helper
  • get iframe content as string
  • Retrieve IP address of device
  • Conversion from string “a” to type 'Boolean' is not valid
  • D3 get axis values on zoom event
  • Detect when Facebook like button is clicked
  • Needing to do .toArray() to get output of mongodb .find() on key name not value
  • Make VS2015 use angular-cli ng at build time in a .NET project
  • Can a Chrome extension content script make an jQuery AJAX request for an html file that is itself a
  • Upload files with Ajax and Jquery
  • How to pass list parameters for each object using Spring MVC?
  • AngularJs get employee from factory
  • Proper way to use connect-multiparty with express.js?