javascript – Observables de Alto Nivel RXJS – Obtener información de dos fuentes de datos

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.