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.
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));