CODEWITHSUNDEEP
angulartypescriptfirebaseionic3angularfire
Runfast Webmaster
Runfast Webmaster

Reputation: 319

How to prevent duplicate results with angularFire

I have firebase db like this : 

    "cardsList" : {
            "tok_1BVGrNCM8UWO9kaul5P0MoQa" : {
              "cardHolder" : "John",
              "expMonth" : 12,
              "expYear" : 2020,
              "number" : "42** **** **** **43",
              "pin" : 1234
            },
              "tok_7BTErNCM8UWO9kaul5P0MoQa" : {
              "cardHolder" : "Eliott",
              "expMonth" : 12,
              "expYear" : 2020,
              "number" : "44** **** **** **49",
              "pin" : 1234
            }
}

I get the results for each card in an array using this :

this.firebaseProvider.list('patientList/'+this.profileMember.idPatient+'/cardsList')
    .subscribe(cards=> cards.forEach(card=> {
      console.log(card.number)
      this.cardsList.push({'number': card.number})
      }))

In my html I show the result with :

<div *ngFor="let card of cardsList">
{{card.number}}
</div>

The problem is that I get duplicate result each time one value on the database is updated (ex: carHolder is updated)

Ex : BEFORE THE UPDATE

42** **** **** **43
44** **** **** **49

AFTER THE UPDATE

42** **** **** **43
44** **** **** **49
42** **** **** **43

How to prevent this?

Any help is welcome.

Alex.

Upvotes: 1

Views: 589

Answers (1)

Sampath
Sampath

Reputation: 65870

You can simply avoid it just by converting observable to promise like below.

import 'rxjs/add/operator/toPromise';

this.firebaseProvider.list('patientList/'+this.profileMember.idPatient+'/cardsList').toPromise().then(cards=> cards.forEach(card=> {
    this.cardsList.push({'number': card.number})
}))

Upvotes: 1

Related Questions