observables busqueda

by xxjcaxx

HTML

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

<input id="inputSearch" type="text" placeholder="Juan" />
<div id="container">


</div>

JavaScript

const { fromEvent, Observable, tap, map, startWith, distinctUntilChanged, debounceTime } = 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 inputSearch = document.querySelector('#inputSearch');
const container = document.querySelector('#container');
const renderPersons = (container) => (persons) => {
	container.innerHTML = `
  		<table>${persons.map(p => `<tr><td>${p.nombre}</td><td>${p.edad}</td><td>${p.hobbies.map(h => h).join(', ')}</td></tr>`).join('')}
  		</table>`
}

fromEvent(inputSearch,'keyup')
	.pipe(
  	
  	map(event=> event.target.value),
    startWith('Juan'),
   ...