Modifying contents of Observable of array objects

Question

I have the following functions inside my service:

   getFiles(): Observable<File[]> {
    const makeFiles = map((response: FileResponse[]): File[] => {
      return response.map((fileResponse: FileResponse): File => {
        return File.fromResponse(fileResponse);
      });
    });

    return this.httpService.get('/profile/files').pipe(
      makeFiles,
      shareReplay(),
    );
  }

  getFileUri(filename: string): Observable<SafeUrl> {
    return this.httpService.get(`/profile/file/uri/${filename}`).pipe(
      mergeMap((uri: string) => this.httpService.get(uri, {}, { useUrlAsItIs: true, responseType: 'arraybuffer' })),
      map((fileBuffer: any) => {
        const unsafeUrl = URL.createObjectURL(new Blob([fileBuffer], {type: 'application/binary'}));
        const safeUrl = this.sanitizer.bypassSecurityTrustUrl(unsafeUrl);

        return safeUrl;
      })
    );
  }

As you can see getFiles return Observable of File Array and getFileUri accepts filename (a property of File class) and returns Observable.

What I want to do is, combine these two functions. Meaning, getFiles() should still return Observable<File[]> and each File in the array should have safeUrl property.

My problem is, I really do not know how to do this complicated task.

Thanks!

You should check combineLatest of rxjs.

ukn
– ukn

2019-03-13 13:08:27 +00:00
Commented Mar 13, 2019 at 13:08 — ukn
– ukn, Commented Mar 13, 2019 at 13:08

martin · Accepted Answer · 2019-03-13 13:58:53Z

1

If you don't mind running all getFileUris in parallel you can use forkJoin to collect all responses and then update the original File objects.

import { forkJoin } from 'rxjs';

getFiles().pipe(
  mergeMap(files => {
    const observables = files.map(file => this.getFileUri(file.filename));

    return forkJoin(...observables).pipe(
      map((urls: SafeUrl[]) => {
        urls.forEach((url, index) => files[index].safeUrl = url);
        return files;
      }),
    );
  ),
}).subscribe(files => ...);

answered Mar 13, 2019 at 13:58

martin

97.4k26 gold badges205 silver badges237 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

iamjc015 Over a year ago

Ill definitely check this! Thanks!

Collectives™ on Stack Overflow

Modifying contents of Observable of array objects

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related