My Angular application sends the Firebase user ID to my server, which then responds with an array of objects to be displayed in a data table.
Everything works fine when I navigate to the data table from the default page. However, upon reloading the app, an error occurs stating "Error trying to diff '[object Object]'. Only arrays and iterables are allowed".
I suspect that this error is caused by the response containing an error message that cannot be properly displayed in the table.
The issue seems to arise because upon reloading the page, the user ID is not retrieved, resulting in the parameter sent to the server being undefined and triggering the error.
Therefore, my question is how can I retrieve the user ID when reloading the data table component before sending the request to the server?
Service:
private user: Observable<firebase.User>;
public userDetails: firebase.User = null;
uid: any;
constructor(private http: HttpClient,
private authFirebase : AngularFireAuth) {
this.user = authFirebase.authState;
this.user.subscribe(
(user) => {
if (user) {
this.userDetails = user;
console.log(this.userDetails.email);
this.uid = this.userDetails.uid;
}
else {
this.userDetails = null;
}
}
);
}
getFullRegistryUniversity(): Observable<DegreeDetails[]> {
console.log(`serviceuid: ${this.uid}`);
let uidString = {
"uid" : this.uid
}
return this.http.post<DegreeDetails[]>(this.serviceUrl, uidString)
}
Component:
export class GraduateComponent implements OnInit {
dataSource = new UserDataSource(this.registryService);
displayedColumns = ['graduateRut', 'major', 'university', 'gradYear'];
constructor(private registryService: RegistryService) { }
ngOnInit() {}
}
export class UserDataSource extends DataSource<any> {
constructor(private registryService: RegistryService) {
super();
}
connect(): Observable<DegreeDetails[]> {
return this.registryService.getFullRegistryUniversity();
}
disconnect() {}
}
Edit:
HTML:
<div>
<mat-table [dataSource]="dataSource">
<ng-container matColumnDef="graduateRut">
<mat-header-cell *matHeaderCellDef> RUT </mat-header-cell>
<mat-cell *matCellDef="let degreeDetails"> {{degreeDetails.graduateRut}} </mat-cell>
</ng-container>
<ng-container matColumnDef="major">
<mat-header-cell *matHeaderCellDef> E-Mail </mat-header-cell>
<mat-cell *matCellDef="let degreeDetails"> {{degreeDetails.major}} </mat-cell>
</ng-container>
<ng-container matColumnDef="university">
<mat-header-cell *matHeaderCellDef> University </mat-header-cell>
<mat-cell *matCellDef="let degreeDetails"> {{degreeDetails.university}} </mat-cell>
</ng-container>
<ng-container matColumnDef="gradYear">
<mat-header-cell *matHeaderCellDef> GradYear </mat-header-cell>
<mat-cell *matCellDef="let degreeDetails"> {{degreeDetails.gradYear}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
</div>