observables HOO

by xxjcaxx

HTML

<script src="https://unpkg.com/rxjs@^7/dist/bundles/rxjs.umd.min.js"></script>

<button id="button">
Click
</button>
<div id="container">


</div>

JavaScript

const { fromEvent, Observable, tap, of, map, delay, concatMap, mergeAll,
mergeMap, switchMap} = rxjs;

const personas = [
  { nombre: 'Juan', edad: 30, hobbies: ['correr', 'leer'] },
  { nombre: 'María', edad: 25, hobbies: ['pintar', 'bailar'] },
  { nombre: 'Pedro', edad: 35, hobbies: ['cocinar', 'viajar'] },
  { nombre: 'Ana', edad: 28, hobbies: ['cantar', 'nadar'] },
  { nombre: 'Luis', edad: 32, hobbies: ['jugar fútbol', 'ver películas'] },
  { nombre: 'Laura', edad: 29, hobbies: ['bailar salsa', 'viajar'] },
  { nombre: 'Carlos', edad: 27, hobbies: ['programar', 'tocar guitarra'] },
  { nombre: 'Sara', edad: 31, hobbies: ['escribir', 'hacer yoga'] },
  { nombre: 'Javier', edad: 26, hobbies: ['jugar videojuegos', 'montar bicicleta'] },
  { nombre: 'Elena', edad: 33, hobbies: ['cocinar', 'leer'] },
  { nombre: 'Andrés', edad: 24, hobbies: ['dibujar', 'escuchar música'] },
  { nombre: 'Isabel', edad: 37, hobbies: ['correr', 'ver series'] },
  { nombre: 'Gabriel', edad: 28, hobbies: ['jugar tenis', 'viajar'] },
  { nombre: 'Marta', edad: 30, hobbies: ['bailar ballet', 'leer'] },
  { nombre: 'Ricardo', edad: 32, hobbies: ['tocar piano', 'cocinar'] },
  { nombre: 'Carolina', edad: 26, hobbies: ['cantar', 'hacer senderismo'] },
  { nombre: 'Pablo', edad: 29, hobbies: ['jugar baloncesto', 'ver películas'] },
  { nombre: 'Valentina', edad: 31, hobbies: ['pintar', 'viajar'] },
  { nombre: 'Héctor', edad: 27, hobbies: ['escribir poesía', 'jugar videojuegos'] },
  { nombre: 'Daniela', edad: 30, hobbies: ['cocinar', 'bailar'] }
];


const fakeNetwork = (attr) => of(...personas.map(p => p[attr])).pipe(
concatMap(x => of(x)
    .pipe(
      delay(Math.random()*100))
  )
);


of('nombre','edad','hobbies').pipe(
                   map(attr => fakeNetwork(attr)),
                   mergeAll()
                   	
                   ).subscribe(
            //       people => console.log(people)
                   )

of('nombre','edad','hobbies').pipe(
                  ...