Aquí lo que estoy tratando de hacer: tengo pokemons de la API. pokeapi La respuesta http es una lista de objetos que solo incluye nombre y url prop. Necesito mapear estas URL a valores observables. básicamente puedo usar
Promise.all(...).then(data => observable$.next(data))pero esto me parece poco elegante, esto es lo que intento
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) ); });Me pregunto si existe un método para usar operadores observables (mapa) para generar el resultado con un solo observable con elegancia.
Puede lograrlo usando la función forkJoin , como la siguiente:
// 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));