1

En esta pequeña aplicación intento filtrar algunos datos, he estado probando pero he fallado.

A continuación le mostraré la estructura de la aplicación:

Este es el JSON:

[
    {
        "id": 1,
        "nombre": "Pedro",
        "apellido": "Gutierez",
        "edad": 35
    },
    {
        "id": 2,
        "nombre": "Susana",
        "apellido": "Martinez",
        "edad": 45
    },
    {
        "id": 3,
        "nombre": "Sebastian",
        "apellido": "Gómez",
        "edad": 50
    },
    {
        "id": 4,
        "nombre": "Analía",
        "apellido": "Torres",
        "edad": 35
    },
    {
        "id": 5,
        "nombre": "Germán",
        "apellido": "Sandez",
        "edad": 35
    }
]

Cuando ingrese algún dato, me gustaría que se traigan los datos coincidentes.

2 respuestas 2

0

En tu escenario tienes que cuando se pulsa el botón, se ejecuta el método filtrandoPersonas, pero ese método devuelve el resultado, que no lo estás guardando en ningún sitio. Recuerda que filter te devuelve un nuevo array, no modifica el existente.

Podrías hacer algo como:

  personas: Persona[];
  filtrado: Persona[] = [];
  palabrasClave: any = '';

  constructor(private service: PersonasService) { }

  ngOnInit(): void {
    this.traerLasPersonas(); // te traes todas las personas
    this.filtrado = this.personas; //en un primer momento, se muestran todas
  }

  traerLasPersonas() {
    this.personas = this.service.getPersonas();
    console.log(this.personas);
  }

  filtrandoPersonas() {
    console.log(this.palabrasClave);
    const filtro = this.palabrasClave.toLocaleLowerCase()
    //actualizamos el filtro
    this.filtrado = this.personas.filter(persona=> {
      const nombreCompleto = persona.nombre + " " + persona.apellido;
      return nombreCompleto.toLocaleLowerCase().indexOf(filtro) !== -1;
    });
  }

Y entonces en tu plantilla tendrías que cambiar el bucle a

<tr *ngFor="let persona of filtrado">
0

Agrego un ejemplo que filtra todas las coincidencias de las palabras de la búsqueda.

let nombres=[{id:1,nombre:"Pedro",apellido:"Gutierez",edad:35},{id:2,nombre:"Susana",apellido:"Martinez",edad:45},{id:3,nombre:"Sebastian",apellido:"Gómez",edad:50},{id:4,nombre:"Analía",apellido:"Torres",edad:35},{id:5,nombre:"Germán",apellido:"Sandez",edad:35}];


// palalabras de la búsqueda
let busqueda = "Pedro Sebastian"
// separar cada palabra
let tokens = busqueda.toLowerCase().split(' ')
// filtrar el arreglo nombres donde el nombre esté incluido
// dentro del arreglo de palabras de búsqueda
let nombresFiltrados = nombres.filter(n => tokens.some(t => t == n.nombre.toLowerCase()))

console.log(nombresFiltrados)

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.