Mapping obsevable to another list of promise observable-CodePudding

Here what i am trying to do: I have pokemons from the api. pokeapi The http response is list of object only includes name and url prop. I need to map these url to observable values. I can basically use

    Promise.all(...).then(data => observable$.next(data))

but this seems unelegant to me, here is what i try

    const __URL__ = 'https://pokeapi.co/api/v2/pokemon/';
    const pokemon$ = from(
        fetch(__URL__)
            .then((res) => res.json())
            .then((res) => res.results)
    );
    
    var pokemons$ = new BehaviorSubject([]);
    pokemon$.subscribe((pokes) => {
        Promise.all(pokes.map((p) => fetch(p.url).then((res) => res.json()))).then((pokks) =>
            pokemons$.next(pokks)
        );
    });

I just wonder is there a method to use observable operators(map) to generate the result with a single observable elegantly.

CodePudding user response：

You can achieve that using forkJoin function, like the following:

// import { BehaviorSubject, forkJoin, from } from 'rxjs';
// import { mergeMap } from 'rxjs/operators';

const __URL__ = 'https://pokeapi.co/api/v2/pokemon/';
const pokemon$ = from(
  fetch(__URL__)
    .then((res) => res.json())
    .then((res) => res.results as Array<{ name: string; url: string }>)
);

const pokemons$ = new BehaviorSubject([]);
pokemon$
  .pipe(
    mergeMap((pokes) =>
      forkJoin(
        pokes.map((poke) => from(fetch(poke.url).then((res) => res.json())))
      )
    )
  )
  .subscribe((pokks) => pokemons$.next(pokks));