I am using rxjs observables to get data from the database and then I have a repository that is supposed to pipe a observable so I can map the data to the model Leaderboad. When doing this I found that the array that I get has values when I console log it. But when I try to get the length or do a foreach, it seems that it does not have entries.

export class LeaderboardRepository {
  provider: LeaderboardProvider;

  constructor(provider: LeaderboardProvider) {
    this.provider = provider;
  }

  public observeLeaderboardSortedByScore(limit: number, startAt?: any): Observable<Leaderboard[]> {
    return this.provider.observeLeaderboardSortedByScore(limit, startAt).pipe(
      map((list:Map<string, any>[]) => {
        console.log(list);

        //outputs
        
        // leaderboard-repository.ts:18 
        // []
        // 0: Map(6) {'username' => 'TestLorenzofefe', 'characterUsed' => 2, 'submittedAt' => t, 'userId' => 'iukQSLQOvqYcRx85rBAoz3BfDM13', 'score' => 54, …}
        // 1: Map(6) {'score' => 44, 'submittedAt' => t, 'characterUsed' => 2, 'userId' => 'iukQSLQOvqYcRx85rBAoz3BfDM13', 'username' => 'testName', …}
        // 2: Map(6) {'score' => 10, 'submittedAt' => t, 'characterUsed' => 1, 'id' => 'mvwDUfGMaQt7CMyzhhXs', 'username' => 'testName', …}
        // 3: Map(6) {'userId' => 'iukQSLQOvqYcRx85rBAoz3BfDM13', 'characterUsed' => 2, 'score' => 9, 'id' => 'bECAnhTmSIoWPiFRwy9V', 'submittedAt' => t, …}
        // 4: Map(6) {'username' => 'TestLorenzofefe', 'userId' => 'iukQSLQOvqYcRx85rBAoz3BfDM13', 'characterUsed' => 4, 'submittedAt' => t, 'id' => 'WdCP1facjsm2qDhjT1ES', …}
        // 5: Map(6) {'username' => 'testName', 'score' => 7, 'userId' => 'iukQSLQOvqYcRx85rBAoz3BfDM13', 'submittedAt' => t, 'characterUsed' => 1, …}
        // 6: Map(6) {'characterUsed' => 2, 'username' => 'TestLorenzofefe', 'score' => 6, 'submittedAt' => t, 'userId' => 'iukQSLQOvqYcRx85rBAoz3BfDM13', …}
        // 7: Map(6) {'id' => 'QJhnpbDBGTBAC3jrqOzL', 'characterUsed' => 2, 'username' => 'TestLorenzofefe', 'userId' => 'iukQSLQOvqYcRx85rBAoz3BfDM13', 'score' => 5, …}
        // 8: Map(6) {'characterUsed' => 3, 'submittedAt' => t, 'score' => 4, 'username' => 'TestLorenzofefe', 'userId' => 'iukQSLQOvqYcRx85rBAoz3BfDM13', …}
        // 9: Map(6) {'id' => 'BYrGJo4WBtb3nicOvD9y', 'submittedAt' => t, 'username' => 'testName', 'score' => 3, 'userId' => 'iukQSLQOvqYcRx85rBAoz3BfDM13', …}
        // 10: Map(6) {'userId' => 'iukQSLQOvqYcRx85rBAoz3BfDM13', 'submittedAt' => t, 'username' => 'testName', 'score' => 1, 'characterUsed' => 2, …}
        // 11: Map(6) {'username' => 'TestLorenzofefe', 'id' => 'Vw7tTeTLO4aQBXkkffZc', 'submittedAt' => t, 'characterUsed' => 2, 'score' => 0, …}
        // 12: Map(6) {'username' => 'TestLorenzofefe', 'submittedAt' => t, 'id' => 'P7bsnHFbPXW5UO3IOD4B', 'score' => 0, 'characterUsed' => 3, …}
        // length: 13

        console.log(list.length);

        //outputs 0

        return list.map((map:Map<string, any>) => Leaderboard.fromMap(map)); //immediatly returns a empty array
      })
    );
  }
}

This is the provider

class FirestoreLeaderboardProvider implements LeaderboardProvider {
  private firestore: firebase.firestore.Firestore;
  private leaderboardCollection: firebase.firestore.CollectionReference<firebase.firestore.DocumentData>;

  constructor(period: string) {
    this.firestore = firebase.firestore();
    this.leaderboardCollection = this.firestore.collection(period   "Leaderboard");
  }

  public observeLeaderboardSortedByScore(limit = 1, startAt?: any): Observable<Map<string, any>[]> {
    let query = this.leaderboardCollection.orderBy("score", "desc").limit(limit);
    if (startAt) query = query.startAt(startAt);

    return new Observable<Map<string, any>[]>((observer) => {
      let map: Map<string, any>[] = [];
      const unsubscribe = query.onSnapshot((snapshot) => {
        const test = snapshot.docs.map((val) => new Map(Object.entries(val.data())));
        map.push(...test);
      });
      observer.next(map);
      return unsubscribe;
    });
  }
}

So when I subscribe to the observable I get a empty array, what is happening?

CodePudding user response：

try to place observer.next(map); inside onSnapshot otherwise it'll not emit with newest values.