observables operadors

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, map, scan, takeWhile } = 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'] }
];


fromEvent(document.querySelector('#button'),'click')
		.pipe(
    	scan((contador,actual)=> contador+1 ,-1),
      tap(c => console.log(c)),
      takeWhile(contador => contador < personas.length),
      map(contador => personas[contador]),
      
    )
    .subscribe({
       next: function(value) {console.log(value);},
       error: function(err) {console.error(err);},
       complete: function() {console.log("Completed");}

    });