I'm developing a website with Angular and currently having a difficulty that prevents me from placing the retrieved documents from Firebase sub-collection in an array.

1. getBusStopsByRoute(id) function in data.service.ts file

  export class DataService {

  constructor(private afs: AngularFirestore) { }

  //retrieving documents from bus stop sub-collection
  getBusStopsByRoute(id:string){
    return this.afs.doc("BusRoute/" id).collection('busStopList/').snapshotChanges()
  }
}

2. getBusStops() function in busStops.component.ts file

  //function from Ts file for storing retrieved documents in busStops array
  getBusStops(id:string){
    this.dataApi.getBusStopsByRoute(id).subscribe(res=>{
      this.busStops=res.map((e:any)=>{    //busStops declared as any
        const data = e.payload.doc.data();
        data.id = e.payload.doc.id;
        return data;
      })
       console.log('inside subscribe function', this.busStops);
    })
    console.log('Outside subscribe function', this.busStops);
  }

3. Declaring busStop and calling out the.getBusStops(id) function

  export class AddBusrouteComponent implements OnInit {

  form !: FormGroup;
  title!: string;
  routeNo !: string;
  description !: string;
  destination !: string;
  arrival !: string;
  id !: string;
  buttonName!: string;
  busStops!: any

  constructor(
    private fb : FormBuilder,
    @Inject(MAT_DIALOG_DATA) data: any,
    private dataApi: DataService,
    private dialogRef:  MatDialogRef<AddBusrouteComponent>
    ) {
      this.id = data.id;
      this.title = data.title;
      this.routeNo = data.routeNo;
      this.description = data.description;
      this.destination = data.destination;
      this.arrival = data.arrival;
      this.buttonName = data.buttonName;
      // this.busStops = data.busStops;  //hard-coded
    }


  ngOnInit(): void {
    this.getBusStops(this.id);

    this.form = this.fb.group({
      id:[this.id, []],
      routeNo:[this.routeNo, [Validators.required]],
      description: [this.description, [Validators.required]],
      destination: [this.destination, [Validators.required]],
      arrival: [this.arrival, [Validators.required]],
      busStops: this.busStops
    })
   console.log('formValue: ', this.form.value)
  }

4. Result in the console

Outside subscribe function undefined

formValue:  
{id: 'BusRoute1671550149650', routeNo: 'aasd', description: 'sdasd', destination: 'dasd', arrival: 'asd', …}
arrival: "asd"
busStops: null
description: "sdasd"
destination: "dasd"
id: "BusRoute1671550149650"
routeNo: "aasd"

inside subscribe function (3) [{…}, {…}, {…}]

I tried to store the retrieved documents in the declared array ("busStops"), however the console.log method returned "Undefined". According to what I've found, the cause is that the array can only be defined in the subscribe function from 2. but not outside of the function.

As you can see in 2., I used the console.log method both inside and outside of the subscribe function to display the array (busStops) value. Both outcomes are not the same. 4. is the screenshot of the outcome.

Is it possible to save these retrieved documents in an array?

CodePudding user response：

When you get the bugStops, you actually are making a network call to Firebase. Therefore, you can't get the information right after you make this call. That's why you get Undefined when you print the log outside.

On the other hand, if you subscribe to the network call. All the code inside the subscribe function is called after the network call is done. This is why the inside log is printed after the outside log.

To save the data, just define an array outside the subscribe function scope and put the data into the array inside the subscribe function.

Besides, you can also consider using the Promise graph, so that you can write some code like:

const array = await getBusStops();