I made a request to Google Drive using the gapi library:
getFolders(folderId: string): Observable<{ id: string, name: string }[]> {
const promise = gapi.client.drive.files.list({
fields: 'incompleteSearch,nextPageToken,files(id,name)',
q: `'${folderId}' in parents`,
}).then((res) => {
return JSON.parse(res.result.files);
});
return from(promise);
}
Then I attempted to display this data in a component:
.ts file ngOnInit:
this.data$ = this.googleDriveService.getFolders(rootFolderId)
.pipe(
map((files) => {
debugger;
return files.map(file => ({ id: file.id, header: file.name, content: '', imageUrl: this.defaultImageUrl }));
}),
takeUntil(this.destroy$),
);
And in the html file:
<mat-grid-tile *ngFor="let elem of (data$ | async)">
<app-card (input)="returnCartItem(elem)" (click)="goto(elem.header, elem.id)"></app-card>
</mat-grid-tile>
The issue is that the data$ always returns empty. I placed a debugger in the map function to check if there was an issue there, but it never reaches inside the map function. Despite receiving a response with 2 files, the res.result.files does not appear to be empty;