Estoy intentando comprender los Observables de Orden Superior de RXJS. Después de ver muchos vídeos y manuales, ya entiendo que los Observables de Orden Superior son aquellos observables que emiten otros observables (en lugar de valores). También entiendo los conceptos de Observables externos e internos.
Hasta aquí todo correcto. Me he ido recorriendo los Observables de Orden Superior y he intentado hacerme un ejemplo "más o menos real", rebajando la complejidad, para poder entender sus diferencias.
El artículo que he utilizado como base es el de esta web (https://pablomagaz.com/blog/combinando-observables-en-rxjs).
- He creado los observables usuarios y aficiones, y una función para buscar aficiones:
let usuarios$ = of({nombre: 'Antonio',
aficion: 'Senderismo',
domicilio: 'Madrid'},
{nombre: 'Maria',
aficion: 'Musica',
domicilio: 'Paracuellos'},
{nombre: 'Fernando',
aficion: 'escalada',
domicilio: 'Madrid'},
{nombre: 'Juan',
aficion: 'Jardineria',
domicilio: 'Madrid'}
);
let aficiones$ = of({aficion: 'Senderismo',
rutas: ['Siete Picos','Las Machotas']},
{aficion: 'Musica',
grupos: ['Clasica','ColdPlay']},
{aficion: 'Jardineria',
grupos: ['Geranios','Nabos']},
{aficion: 'Informatica',
lenguajes: ['Javascript','Python']
}
);
function buscarAficion(aficion){
return aficiones$.pipe(
filter( resp => resp.aficion === aficion)
);
}
Con MergeAll he creado el siguiente código para aplanar los observables:
usuarios$.pipe(
map(usuario => buscarAficion(usuario.aficion)),
mergeAll()
).subscribe(res => console.log(res));
El resultado es satisfactorio. Sólo salen del segundo observable los que están en el primero:
{…}
aficion: "Senderismo"
rutas: Array [ "Siete Picos", "Las Machotas" ]
<prototype>: Object { … }
script.js:186:28
{…}
aficion: "Musica"
grupos: Array [ "Clasica", "ColdPlay" ]
<prototype>: Object { … }
script.js:186:28
{…}
aficion: "Jardineria"
grupos: Array [ "Geranios", "Nabos" ]
<prototype>: Object { … }
El problema está cuando quiero que en la salida me muestre datos del primer observable y del segundo (la idea es que fuesen dos llamadas a servicios REST y sacar una información a partir de ellos).
- Intento hacer lo siguiente:
usuarios$.pipe(
map(usuario => { return {nombre: usuario.nombre,
aficion: usuario.aficion,
data: buscarAficion(usuario.aficion)}
}),
mergeAll()
).subscribe(res => console.log(res));
Y me da el siguiente error:
Uncaught TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.
He intentado otras cosas y tampoco han funcionado. ¿Cómo se podría combinar la información de estas dos fuentes?
Gracias.