Why is it so complex to convert AngularFire Observable to Array?

Question

I am calling data from Firebase RTDB and that data is in an Observable. The issue I am having here is that, in my .TS file i would like to access the content of the Observable, that thought seems to not be possible.

I need to get in there so I could use certain value to write out some logic for the component, at the moment only place I could access the data is in the HTML using async.

Evrything is in a switchmap because I am change the route using button clicks, so I could pull data from different paths in the DB.

Component .TS

import { Component, OnChanges, OnInit, SimpleChanges, Inject } from '@angular/core';

import { AngularFireDatabase } from '@angular/fire/compat/database';
import { BehaviorSubject, Observable, switchMap } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']

  
})
export class AppComponent  {

// implements OnChanges, OnInit
  time$: Observable<any[]>;
  lineup$: Observable<any[]>;

  x$ = new BehaviorSubject<string>('race_no_1');
  
  constructor(private db: AngularFireDatabase) {
    // Get Lineups
    this.lineup$ = this.x$.pipe(switchMap((x) => {
      return this.db.list('race/'+x).valueChanges();
  }))

    // Get Race Events
      this.time$ = this.x$.pipe(switchMap((x$) => {
          return this.db.list(x$).valueChanges();
      }))
  }
  
  race_no(b: string) {
      this.x$.next(b);
  }
}

I am expecting to get a regular TS array out of this so I could handle component logic using the values in the array . Like adding a json return to array.

How can I get this done quick and simple ?

Answer 1

Just use subscribe as stated in the manual. Link to accessing Observable streams

lineups$.subscribe(
  value => this.someArray.push(value);
);

Now you got a new array that is flat.