i using firebase child_added watch new entries being added database.
it seemed work while noticed issues when leaving connection idle. if leave app open prolonged period of time when firebase returns duplicates. think maybe down connection being dropped , established.
here 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 += '<p><audio id="source" controls>'; output += '<source src="'+audiourl+'" type="audio/mpeg">'; output += '</audio></p>'; output += '<p>'+timereceived+'</p>'; output += '<p>'+transcription+'</p>'; output += '</div>'; output += '</li>'; $('.collapsible').append(output); $('.collapsible').collapsible(); },
if understand issue correctly, it's i've come across few times. believe trick .empty() existing data within .on call.
as example, on site have goals users can add. when add new goal .on call adds new goal bottom of list.
i having issue deleting goal duplicate ui data.
in order address issue, moved $(#goals").empty(); within .on call.
firebase.database().ref('users/' + user).on('value', function(snapshot) { $("#goals").empty(); // removes all 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 need append after data has been added can here. e.g. $("#goals").append("</div>"); }); i suspected doing force relevant ui items reload don't. if add goal pops on bottom of list, if remove goal ui removes goal without reloading or duplication.
so in case add $('.collapsible').empty(); after .on call , before var voicemail = snapshot.val();.
note: call $("#goals").empty() prior .on call.
