How to use await in Array.prototype.map to wait for RxJS Observables

Question

How can I await a result inside a map function where getFooBar returns an observable?

Ex code:

this.fooBarResponse.fooBars.map(async (x) => {
      x.fooBar = await this.fooBarService
        .getFooBar(x.fooBarId.toString())
        .toPromise();

      return x;
    });

foobar.service.ts

getFooBar(id: string): Observable<FooBar> {
    return this.fooBarsCollection.doc<FooBar>(id).valueChanges();
}

You shouldn't, mixing promises and RxJs is not optimal. You should switchMap from one observable to the next and have a single subscribe. — Adrian Brand, Jul 11 '20 at 05:23
Reduce your array of fooBars to a single observable that switchMap from one to the next — Adrian Brand, Jul 11 '20 at 05:45

Unmitigated · Accepted Answer · 2020-07-11T05:21:53.080

0

Array#map is synchronous. Use a for...of loop instead.

for(const x of this.fooBarResponse.fooBars){
    x.fooBar = await this.fooBarService
        .getFooBar(x.fooBarId.toString())
        .pipe(take(1))
        .toPromise();
}

edited Jul 11 '20 at 05:21

answered Jul 11 '20 at 04:35

Unmitigated

76,500
11
62
80

That doesn't seem to work either for me. However, it works when I loop over it and subscribe to getFooBar but doesn't solve the problem of retrieving the result for x.fooBar. – millerg Jul 11 '20 at 05:02
Here's what my getFooBar method looks like, I'm using firestore ```getFooBar(id: string): Observable { return this.fooBarsCollection.doc(id).valueChanges(); }``` – millerg Jul 11 '20 at 05:09
I'm not sure what you're returning there. – Unmitigated Jul 11 '20 at 05:10
`(method) AngularFirestoreDocument.valueChanges(): Observable` – millerg Jul 11 '20 at 05:13
https://stackoverflow.com/a/51677415/10733081 seemed to resolve it – millerg Jul 11 '20 at 05:19

Adrian Brand · Answer 2 · 2020-07-11T06:48:30.317

0

Reduce your array of fooBars to a single observable that switchMap from one to the next

const { of } = rxjs;
const { switchMap, delay } = rxjs.operators;

const fooBarResponse = {
  fooBars: [{ fooBarId: 1 }, { fooBarId: 2 }, { fooBarId: 3 }, { fooBarId: 4 }, { fooBarId: 5 }, { fooBarId: 6 } ,{ fooBarId: 7 } , { fooBarId: 8 }]
}

const fooBarService = {
  getFooBar: x => of(`emitted ${x}`).pipe(delay(500))
};

fooBarResponse.fooBars.reduce(
  (obs$, x) => obs$.pipe(
    switchMap(_ => {
      console.log(`Switching from foobar ${x.fooBarId}`);
      return fooBarService.getFooBar(x.fooBarId.toString());
    })
  ),
  of(null) // start with some random observable
).subscribe(finalEmit => {
  console.log(finalEmit);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.6.0/rxjs.umd.min.js"></script>

edited Jul 11 '20 at 06:48

answered Jul 11 '20 at 05:52

Adrian Brand

20,384
4
39
60

Property 'pipe' does not exist on type FooBar. fooBars is a FooBar[] – millerg Jul 11 '20 at 06:02
Then fooBarService.getFooBar is not returning an observable – Adrian Brand Jul 11 '20 at 06:07
Updated my question with getFooBar method – millerg Jul 11 '20 at 06:12
What does valueChanges return? It is not an observable if it doesn't have the pipe method unlees you are using an old 5.x version of RxJs. – Adrian Brand Jul 11 '20 at 06:14
Sorry, I used foobar as an arbitrary word for all my variables. I can see how that could be confusing with what getFooBar returns. – millerg Jul 11 '20 at 06:16
valueChanges is returning `Observable ` – millerg Jul 11 '20 at 06:18
1

I edited my answer into a runable script, you can see it works – Adrian Brand Jul 11 '20 at 06:25

How to use await in Array.prototype.map to wait for RxJS Observables

2 Answers2