Angular 2 filter pipe on multiple values

Question

I'm currently trying to filter a table of users using pipes. I get it to work for 1 selection, but I'm trying to expand it to multiple selection. Keep in mind this is for only one column of the table. As of right now I have a column of users such as: Adam, Brenda, Dan, Harry. etc.. Keep in mind this column might multiple of the same name which I want to return as well. My current pipe implementation is as follows:

import * as _ from 'lodash';
import {Pipe, PipeTransform} from '@angular/core';

@Pipe({
name: 'dataFilter'
})
export class DataFilterPipe implements PipeTransform {

transform(array: any[], query: string): any {
if (query) {
  return _.filter(array, row=>row.user.indexOf(query) > -1);
}
return array;
}
}

And my html is simply:

<table [mfData]="tableData | dataFilter : filterQuery" #mf="mfDataTable">

Where the filterQuery is just a string. Basically what I want to do is pass in an array of names to that filterQuery so it returns the values based on that. So lets say the rows of the user column had:

Adam, Adam, Brenda, Dan, Harry, Harry, Harry

and I passed in filterQuery ['Adam' , 'Harry'] I would get back:

Adam, Adam, Harry, Harry, Harry

Any help on modifying the code to help achieve this would be appreciated! I tried doing some loops in the transform function with the query: string[] but no luck yet.

Thanks!

Possible duplicate of how to filter *ngFor result based on a selected dropdown value — Aravind
– Aravind, Commented Nov 4, 2017 at 17:57

vgogov · Accepted Answer · 2017-11-04 20:05:27Z

1

I got to work via this pipe:

export class DataFilterPipe implements PipeTransform {
transform(array[], query:string[]):any[] {
if (typeof array === 'object') {
  var resultArray = [];
  if (query.length === 0) {
    resultArray = array;
  }
  else {
    resultArray = (array.filter(function (a) {
      return ~this.indexOf(a.user);
    }, query));
  }
  return resultArray;
}
else {
  return null;
  }
 }
}

answered Nov 4, 2017 at 20:05

vgogov

771 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular 2 filter pipe on multiple values

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related