Firebase combined Observables in Ionic 2/Angular 2 Project - They only update once

Question

I have an Ionic 2 project where I'm using Firebase and I've been trying to master the art of creating many-to-many relationships, utilizing observables. In some of my previous questions, I've been making some progress where I can aggregate separate paths into one observable.

However, using my latest code, it would seem that when I update the data in the Firebase database, it only updates the observable a single time. After that, the UI doesn't update and I have to refresh the page in order to pull the latest data from the Firebase database.

Here is my function:

public getUserProfile(data) {
    return this._af.database
      .object(`/social/users/${data.id}`)

      // Switch to the joined observable

      .switchMap((user) => {

        let vidKeys = Object.keys(user.videos);


        return Observable.combineLatest(
          vidKeys.map((vidKey) => this._af.database
            .object(`/social/videos/${vidKey}`)
          ),
          (...videos) => {
            vidKeys.forEach((vidKey, index) => { user.videos[vidKey] = videos[index] });
            return user;
          }
        );
      });
  }

Update: Adding the code that calls this function.

In my component:

ionViewDidLoad() {

    this._users.getUserProfile({id: 'c25zdGFyb3NjJJuYtREaYWlsLmNvbQ=='}).subscribe(success => {
      this.user = success;

      this.videoKeys = Object.keys(this.user.videos);
    });

  }

In my template:

<div *ngFor="let key of videoKeys">
        {{user.videos[key].title}}
        <img src="{{user.videos[key].thumbnail}}" />
      </div>

Here is what my database object for my user looks like:

{
    users: {
     c25zdGFyb3NjJJuYtREaYWlsLmNvbQ==
       videos {
         AFA-rOls8YA: true,
         AlLsp4gnyDQ: true,
         dX_1B0w7Hzc: true,
         ik5qR5bw75E: true,
         njos57IJf-0: true
       },
       videos {
         AFA-rOls8YA {
           attached_members {
             c25zdGFyb3NjJJuYtREaYWlsLmNvbQ==: true
           }
           title: "Hello...it's me"
         },
         AlLsp4gnyDQ: { ... },
         dX_1B0w7Hzc: { ... },
        }
      }
    }
}

This question is an extension of my previous question here.

I'm still relatively new to observables, but does anyone think they have any idea what could be going on here?

Could you include some of the code that calls and consumes the observable returned by getUserProfile? Can you confirm that you don't use first or take(1) on the returned observable? — cartant
Alright, I realized I need to show the template as well. I'm not sure if how I'm rendering the observable subscribe results, but I had to do it the way I'm doing it in my code. Could that be having an effect? It's all there now — Stevie Star

Stevie Star Stevie Star · Accepted Answer · 2016-11-15T04:20:36

Okay, I realized after some trial and error that there was nothing wrong with the code that is posted or from my previous answer. There was an error in my code that I wasn't picking up during my tests. I commented the problem code and the updates are happening consistently, as expected.

Let this be a lesson where you quadruple check code you had expected to work since it was working before.

Firebase combined Observables in Ionic 2/Angular 2 Project - They only update once

1 Answers