Angular 15 filter multiple value from json array seperated by comma

Question

i'm using Angular 15 in my project. I'm able to filter single value from search box but what I want to achieve is to filter multiple values from search box seperated by comma. Any help would be appreciated.

FilterPipe
import { Pipe, PipeTransform } from '@angular/core';
import { FilterData} from './data';

@Pipe({ name: 'datum' })
export class filterPipe implements PipeTransform {
transform(values: FilterData[], filter: any): FilterData[] {
if (!filter || filter.length === 0) {
  return values;
}

if (values.length === 0) {
  return values;
}

// @ts-ignore
return values.filter((value: Yafo) => {

  const matchFilter = [];
  const filterArray = filter.split(';');
  const columns = (<any>Object).values(values);
  

  // Main
  filterArray.forEach((filter:any) => {
    const customFilter: any = [];
    columns.forEach((column:any) =>
      customFilter.push(column.toLowerCase().includes(filter))
    );
    console.log(customFilter);
    matchFilter.push(customFilter.some(Boolean)); // OR
  });



  const nameFound =
    value.Firma.trim().toLowerCase().indexOf(filter.toLowerCase().split(',')) !== -1;
  const emailFound =
    value.Email.trim().toLowerCase().indexOf(filter.toLowerCase().split(',')) !== -1;
  const plzFound =
    value.Plz.trim().toLowerCase().indexOf(filter.toLowerCase().split(',')) !== -1;
  const datumFound =
    value.RegistrationDatum.trim().toLowerCase().indexOf(filter.toLowerCase().split(',')) !== -1;

  if (nameFound || emailFound || plzFound || datumFound) {
    return value;
  }
});
}
}

Answer 1

I hope, I understand you correctly, you need to split filtered value and add the value to customFilter, like this

    this.dataSourceCommaSepareted.filterPredicate = (
          data: UserData,
          filters: string
        ) => {
          const matchFilter = [];
          const filterArray = filters.split(';');
          const columns = (<any>Object).values(data);
          // OR be more specific [data.name, data.race, data.color];
    
          // Main
          filterArray.forEach((filter) => {
            const customFilter = [];
            columns.forEach((column) =>
// Here we split the filter value
              filter
                .split(',')
                .forEach((valueOfFilter) =>
                  customFilter.push(column.toLowerCase().includes(valueOfFilter))
                )
            );
            matchFilter.push(customFilter.some(Boolean)); // OR
          });
          return matchFilter.every(Boolean); // AND
        };

Here is my exapmle on stackblitz https://stackblitz.com/edit/sb-issue-multiple-filter-ygaowm?file=app/app.component.html

Answer 2

Here is a solution i did. It is working. Thanks for the support

import { Pipe, PipeTransform } from '@angular/core';
import { FilterData} from './data';

@Pipe({ name: 'filter' })
export class filterPipe implements PipeTransform {
  transform(items: any[], filterValues: string): any[]{
  console.log('Filter pipe called');

if(!items || !filterValues){
  return items;
}
const keywords = filterValues.split(',');
return items.filter(item => {
  for (const keyword of keywords) {
    if (item.Firma.toLowerCase().indexOf(keyword.toLowerCase().trim()) !== -1 ||
      item.Plz.toLowerCase().indexOf(keyword.toLowerCase().trim()) !== -1) {
      return true;
    }
    }
   return false;
   })
 }
}