Angular 4 displays multiple results after a function is performed

Ionic Framework ionic-v3
1

I’m a noob and I’m stuck in a problem, I’ve searched everywhere but I couldn’t exactly find a proper solution for it. Have a look at my code

getmyfriends() {
let allfriends;
var friendsuid = [];
this.firefriends.child(firebase.auth().currentUser.uid).on('value', (snapshot) => {
  allfriends = snapshot.val();
  this.myfriends = [];
  for (var i in allfriends){
    friendsuid.push(allfriends[i].uid);
}
  this.userservice.getallusers().then((users) => {
    this.myfriends = [];
    for (var j in friendsuid)
      for (var key in users) {
        if (friendsuid[j] === users[key].uid) {
          this.myfriends.push(users[key]);
        }
      }
    this.events.publish('friends');
  }).catch((err) => {
    alert(err);
  })

})
}

^this is the code from my provider file.

ionViewWillEnter(){
this.requestservice.getmyrequests();
this.requestservice.getmyfriends();
this.myfriends = [];
this.events.subscribe(‘gotrequests’, () => {
this.myrequests = [];
this.myrequests = this.requestservice.userdetails;
})
this.events.subscribe(‘friends’, () => {
this.myfriends = [];
this.myfriends = this.requestservice.myfriends;
})
}

^This code is from my component

When I use ngFor in my html, it works fine the first time. But when I delete a user or add another user, my result gets duplicated and when I refresh the page, the extra duplicate results disappear… How can I fix it? I don’t want to display duplicates. I’m using realtime firebase.
Do I need to unsubscribe ? If yes, then how should I do that. Please explain in detail. Thank you!

2

I think if you rethink the design, the issue you are encountering should magically disappear.

Your component is sad. It doesn’t care about events. It doesn’t want to decouple asking for requests and friends from receiving requests and friends. What it wants to do is this:

ionViewWillEnter(): void {
  this.requests.getMyRequests().subscribe(reqs => this.requests = reqs);
  this.requests.getMyFriends().subscribe(friends => this.friends = friends);
}

Once we have identified what makes life easier for the component, that gives us what the signatures for the provider methods should look like, and there are no events in sight.

getMyRequests(): Observable<Request[]> {
  // todo
}
getMyFriends(): Observable<Friend[]> {
  // todo
}

Figuring out what goes in the “todo” spots might be a challenge at first, but going through that process will teach you a lot about rxjs (and probably firebase as well), and you will develop a clean idiom that you can use in many other situations.

Finally, if you are still having trouble with duplicates, look into the share operator, but again, I expect that the restructuring to return Observables instead of using this decoupled event notification mechanism will clear things up without additional effort.

1 Like
3

I tried your code. Modified it a bit but then it says subscribe does not exist on the property void. Also gives error on Observable. Maybe I’m not doing it right. I do not have much experience with observable.

4

What did you put in the “todo” bits?

5

I haven’t added anything in todo bits. I’m clueless on what to put in it. :joy: I can’t post a reply before 10 minutes? that’s new.

6

ionViewWillEnter(): void {

this.requestservice.getmyrequests().subscribe(reqs => this.myrequests = reqs);
this.requestservice.getmyfriends().subscribe(friends => this.myfriends = friends);

}
getmyrequests(): Observable<Request[]> {
this.myrequests = [];
this.myrequests = this.requestservice.userdetails;
}
getmyfriends(): Observable<Friends[]> {
this.myfriends = [];
this.myfriends = this.requestservice.myfriends;
}

this is what I did. But I am getting an error on Observable and Subscribe.

Subscribe error : "Property ‘subscribe’ does not exist on type ‘void’ "

On friends observable it says:
"[ts] A function whose declared type is neither ‘void’ nor ‘any’ must return a value.
[ts] Cannot find name ‘Friends’. "

On requests observable it says : “A function whose declared type is neither ‘void’ nor ‘any’ must return a value.”

7

You would probably benefit from going through the whole “tour of heroes” sequentially, but if you’re in a hurry and want to try drinking from a fire hydrant, the section that discusses this topic is part 6.

8

Thanks I guess. I’ll think of something else. Thank you for responding. Good day!

9

Honestly, this is a bad idea. Work from official Ionic docs and official Angular docs, and only the most respected blogs, like Morony’s. Ionic has changed so often, there is a LOT of outdated and false information out there.