I can display data from a firestore collection, but cannot access the array elements

Question

I can pull down a stream of data as an observable from firestore and display that data. However, I cannot find any way to access that data to do anything with it. It is nice as the data updates automatically, but I don't see a way to access the data within the observable results.

For example, I get the stream of data through this function to a service.

Function:

this.projectList = this.FirebaseService.getCollection('projects', 'creatorId', this.userData.uid);

Service :

getCollection( collection, paramName, paramValue ) {
    return this.afs.collection( collection, ref => ref.where( paramName, '==', paramValue )).valueChanges();
}

The collection that is returned can be displayed in the a list or be used in a dropdown selection as shown below.

<mat-form-field class="w-80-p ml-10-p mt-20">
  <mat-label>Select a version to see the details</mat-label>
  <mat-select  (selectionChange)="onVersionSelected()"
      [(ngModel)]="currentProject.currentVersionId">
       <mat-option *ngFor="let version of (currentProject['versions'] | async); index as i" [value]="version.uid">
        {{i+1}} - {{version.name}}
      </mat-option>
  </mat-select>
</mat-form-field>

The function than handles the observable data :

onVersionSelected(): void
{
    this.currentProject.versions.forEach((thisVer, index) => {
        if (thisVer.id == this.currentProject.currentVersionId){ this.currentVersion=thisVer; }
    });

}

The problem is that using the for loop, I still get an observable and not the actual data in the array. How do I access this data?

using async pipe in html subscribes to observable and gives you the values but it's not passed anywhere to your .ts so I'd just subscribe to observable in .ts and pass the array of values to HTML without async pipe. also, you have an index so instead of running forEach on every (selectionChange) I'd do if(this.currentProject.currentVersionId === this.currentProject.versions[i].id) { this.currentVersion = this.currentProject.versions[i] } I can post a full answer if you still need help lmk — ihorbond

Atul Gupta Atul Gupta · Accepted Answer · 2020-05-28T05:00:59

You can try doing the following:

this.FirebaseService.getCollection(
    'projects', 'creatorId', this.userData.uid).subscribe(data=>{
        var a=data;
    }
);

I can display data from a firestore collection, but cannot access the array elements

1 Answers