observables combinacions

by xxjcaxx

HTML

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

<button id="button">
Download People
</button>
<div id="container">


</div>

JavaScript

const { fromEvent, Observable, tap, 
         of, delay, zip, merge, concat, 
         forkJoin, combineLatest, concatMap } = 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))
  )
);

fromEvent(document.querySelector('#button'),'click')
				.pipe(
        	
				)
        .subscribe( event => {
           zip(fakeNetwork('nombre'),fakeNetwork('edad')).subscribe(
            // people => console.log('Zipped',people)
           );
          ...