1

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.

1
  • Tampoco funciona esto otro: usuarios$.pipe( mergeMap( usuario => { buscarAficion(usuario.aficion) .map(aficiones => { return { nombre: usuario.nombre, aficion: usuario.aficion, aficiones: aficiones.lista } }) } ) ) .subscribe( resp => console.log(resp) );
    – Antonio U.
    Commented el 3 nov. 2020 a las 16:38

2 respuestas 2

1

Después de romperme mucho la cabeza, he conseguido que el código funcione.

Adjunto el código completo totalmente funcional:

  • Código HTML:
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Pruebas</h1>
    <script src="https://unpkg.com/@reactivex/[email protected]/dist/global/rxjs.umd.js"></script>
    <script src="assets/script.js"></script>
</body>
</html>
  • Código Javascript (script.js):
window.addEventListener('load',inicio);

const { Observable, interval, from } = rxjs;
const { tap, take, mergeMap, map } = rxjs.operators;


class Persona{
    constructor(nombre, edad, aficion){
      this.nombre = nombre;
      this.edad = edad;
      this.aficion = aficion;
    }  
}  
  
class Aficion{
     constructor(nombre,lista){
       this.nombre = nombre;
       this.lista = lista;
     }  
}
  
let personas = [new Persona('Antonio',42,'Lectura'),
                new Persona('Patri',43,'Senderismo'),
                new Persona('Fer',47,'Escalada'),
                new Persona('Maria',46,'Musica')
];
  
let posibilidades = [
    new Aficion('Lectura', ['It','Tierra','22/11/63']),
    new Aficion('Senderismo',['Las Cabrillas','Cerro Larda']),
    new Aficion('Musica',['ColdPlay','Clásica'])  
];  
  
function usuarios$(){
    return interval(1000).pipe(
       take(4),
       map(pos => personas[pos])    
    );
}
  
  
function aficiones$(aficion){
    let aficiones = [];
   
    posibilidades.forEach(
      (afic) => {
        if (afic.nombre === aficion){
          aficiones.push(afic);
        }  
      }  
    )
   
    return from(aficiones);
}

function inicio(){

    usuarios$().pipe(
        mergeMap(
            usuario => {
            return aficiones$(usuario.aficion).pipe(
                map(
                    aficion => {
                        return {
                                usuario: usuario.nombre,
                                aficion: aficion.nombre,
                                posibilidades: aficion.lista 
                        };
                    }
                )
            )
            }  
        )
    ).subscribe(
        val =>  console.log(JSON.stringify(val))
    );
}

Esta es la sálida en consola del código resultante:

{"usuario":"Antonio","aficion":"Lectura","posibilidades":["It","Tierra","22/11/63"]} 
{"usuario":"Patri","aficion":"Senderismo","posibilidades":["Las Cabrillas","Cerro 
{"usuario":"Maria","aficion":"Musica","posibilidades":["ColdPlay","Clásica"]} 
0

Intenta con

usuarios$
    .pipe(
        switchMap(usuario =>
            buscarAficion(usuario.aficion)
                .pipe(
                    map(data => ({
                        data,
                        nombre: usuario.nombre,
                        aficion: usuario.aficion
                    }))
                )
        )
    )
    .subscribe(res => console.log(res));
2
  • No es el operador que quería usar. Lo acabo de solucionar. Gracias de todas formas
    – Antonio U.
    Commented el 10 nov. 2020 a las 16:14
  • Para búsquedas de datos en tiempo real debes evitar mergeMap y usar switchMap
    – Xhulian
    Commented el 10 nov. 2020 a las 21:07

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.