0

Hola Tengo un buscador en angular 11 con pipe filter Me filtra por un campo pero como haría para filtra mas de un campo desde un input como por ejemplo ver si hay un usuario con el nombre y apellido

const resultado = [];



for (let valor of objeto) {

  if (valor.cedula.indexOf(input)  > -1) {
    resultado.push(valor);
    }

  





}
return resultado;
2
  • ¿Cuál es la estructura del JSON que quieres filtrar? Commented el 18 ene. 2021 a las 15:15
  • el ítem del nombre y el apellido que están en dos campos diferentes por ejemplo ... Nombre Apellido y me filtre ese usuario !!
    – Tony
    Commented el 18 ene. 2021 a las 19:13

1 respuesta 1

0

Puede que te sirva lo siguiente, un filtro personalizado para tu objeto.

Suponiendo que tu objeto es algo como el siguiente:

 items = [
    {
      nombre: "Pedro",
      apellido: "Ramirez",
      edad: 28
    },
    {
      nombre: "Juan",
      apellido: "Hernandez",
      edad: 22
    }
  ];

Hacemos un pipe personalizado:

import { Pipe, PipeTransform } from "@angular/core";

@Pipe({ name: "customFilter" })
export class CustomFilter implements PipeTransform {
  transform(mObjects: { apellido: string; nombre: string }[], input: string) {
    if (!input) return mObjects;
    return mObjects.filter(val => this.filterBy(val, input));
  }

  private filterBy(
    mObject: { apellido: string; nombre: string },
    search: string
  ) {
    const reduced = Object.keys(mObject)
      .reduce((prev, current) => this.reduceKeys(prev, current, mObject), "")
      .toLocaleLowerCase();
    return reduced.indexOf(search.toLocaleLowerCase()) > -1;
  }

  private reduceKeys(
    prev: string,
    current: string,
    mObject: { apellido: string; nombre: string }
  ): string {
    if (this.isProp(current)) {
      prev = `${prev}\$${mObject[current]}`;
    }
    return prev;
  }

  //Aquí validas que propiedades quieres que se filtren.
  private isProp(key: string): boolean {
    return key.includes("apellido") || key.includes("nombre");
  }
}

Lo puedes probar de la siguiente manera:

<input type="text" [(ngModel)]="search" />

<li *ngFor="let item of items | customFilter: search">
    {{item | json}}
</li>

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.