CODEWITHSUNDEEP
angulartypescriptfirebasegoogle-cloud-firestore
user2828442
user2828442

Reputation: 2515

Record showing twice if it's updated

When I am updating a record, it becomes double on the screen.

Here is the way I am loading it

   ngOnInit() {
    this.loadItems();
    }
    
      loadItems(){
        this.first_time_enter = true;
        console.log(this.first_time_enter);
        this.tableData = [];   
      let query3 =  firebase.firestore().collection('complaints').where('complaint_status', '==', "Open")
       query3
       .orderBy("complaint_date","desc").limit(2)
       .onSnapshot(querySnapshot=> {  
         querySnapshot.forEach(doc=> {
                      var data = Object.assign(doc.data(), {docid : doc.id}, {duration: duration})
             this.tableData.push(data);
             console.log(this.tableData);
         });
}

I am showing this.tableData array on the html.

When page loads, I see 2 entries and if I update anything from Firebase console, they become 4. How do I manage this, I believe this is happening due to this.tableData.push(data); but I am emptying this same array this.tableData = [] above query which doesn't seem to work.

See pics below:

enter image description here

enter image description here

Upvotes: 1

Views: 97

Answers (1)

Frank van Puffelen
Frank van Puffelen

Reputation: 599041

Every time there are any changes to the complaints, your callback gets called with a querySnapshot that contains all complaints including the ones that aren't changed.

You will either need to only process the documents that were changed, or clear your tableData. Since the latter is the simplest:

  let query3 =  firebase.firestore().collection('complaints').where('complaint_status', '==', "Open")
   query3
   .orderBy("complaint_date","desc").limit(2)
   .onSnapshot(querySnapshot=> {  
     this.tableData = []; // clear previous results
     querySnapshot.forEach(doc=> {
                  var data = Object.assign(doc.data(), {docid : doc.id}, {duration: duration})
         this.tableData.push(data);
         console.log(this.tableData);
     });

Upvotes: 2

Related Questions