RXJS 将单个可观察对象转换为可观察对象数组

Question

I have an API ( getNewStories ) that returns the data as an array of numbers(ids) such as [1,2,3,4...]. There is another API ( getItem ) that uses the number(id) and give its details.

How can I accomplish this with rxjs operators, so that I should only subscribe to it once and it gives me an array of the records with those ids?

I am able to accomplish this using 2 subscriptions, but I want it with one. Is it possible? and if it's, then, how?

this.hnService.getNewStories().subscribe(data => {
  // data is [1,2,3,4,5]
  // create an array of observables for all the ids and get the record for that id
  const observables = data.map(item => this.hnService.getItem(item));
  // use forkJoin to combine the array to single results variable
  forkJoin(...observables).subscribe(results => {
    this.stories = results;
  });
});

with this I have to subscribe to both the APIs.

Answer 1

You were going the right direction with using forkJoin :

this.hnService.getNewStories()
  .pipe(
    concatMap(data => {
      const items$ = data.map(item => this.hnService.getItem(item));
      return forkJoin(...items$);
    }),
  )
  .subscribe(allItems => ...);

forkJoin will wait until all source Observables complete and only then emit all results as a single array.

Answer 2

I think you can achieve this using a flattening operator like this.

this.hnService.getNewStories().pipe(
            .mergeMap(data => this.hnService.getItem(data))
            .subscribe(res => this.stories = res);

Other option can be to create two observable streams and use a combineLatest.

Answer 3

You can simply have implemented as in the the following snippet: (Yes, mergeAll flattens an observable containing an array, for further explanation refer to @Martin's post about the Best way to “flatten” an array inside an RxJS Observable )

getNewStories().pipe(mergeAll(), concatMap(this.getItem), toArray()).subscribe()

You can try running the following snippet:

 const { of } = rxjs; const { concatMap, toArray, mergeAll } = rxjs.operators; function getItem(x) { return of({ item: x }) } of([1, 2, 3, 4]).pipe( mergeAll(), concatMap(getItem), toArray() ).subscribe(console.log)

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