基于多个字段的过滤列表

Question

我正在迭代一个工作列表，并且在这个列表上实现了一个搜索。搜索正常，但现在它只根据一个字段过滤列表。

这是我的清单：

<ion-card *ngFor="let job of allJobs | search : searchTerm">
    <ion-grid>
    <ion-row>
        <ion-col>
        <div>
            <span> {{job.day | uppercase}}</span>
            <span> {{job.month | uppercase}}</span>
        </div>
        </ion-col>

        <ion-col>
        <div>
            <span>{{job.time}}</span>
            <span>{{job.name}}</span>
        </div>
        </ion-col>
    </ion-row>
    </ion-grid>
</ion-card>

我制作了一个用于实现搜索的管道。这是它的代码。

  transform(items: any[], terms: string): any[] {
    if(!items) return [];
    if(!terms) return items;
    terms = terms.toLowerCase();
    return items.filter( it => {
      return it.name.toLowerCase().includes(terms); // only filter name
    });
  }

现在仅根据 name 字段过滤列表。我也想根据 day、month 和 time 过滤列表。

谁能告诉我如何做到这一点？

作业的示例数据。乔布斯是一个对象数组

   [  
      {  
         "id":10,
         "day":"Monday",
         "month":"June",
         "time":"10",
         "name":"John",
         "email":"john@gmail.com"
      },
      {  
         "id":11,
         "day":"Tuesday",
         "month":"May",
         "time":"12",
         "name":"Jane",
         "email":"jane@gmail.com"
      },
      {  
         "id":12,
         "day":"Friday",
         "month":"June",
         "time":"16",
         "name":"",
         "email":"john@gmail.com"
      },
      {  
         "id":13,
         "day":"Tuesday",
         "month":"August",
         "time":"21",
         "name":"",
         "email":"kevin@gmail.com"
      },
      {  
         "id":14,
         "day":"Saturday",
         "month":"December",
         "time":"12",
         "name":"Sam",
         "email":"sam@gmail.com"
      },

   ]

而searchTerm只是一个字符串。

如您所见，示例数据中的字段比 HTML 中显示的字段多，但我仅尝试搜索 HTML 中显示的字段.某些字段可以有空值（例如示例数据中的 name 有两个空值）

我尝试了已经提供的解决方案，但其中 none 可以满足我的要求。

P.S：在某处读到管道不是执行此类功能的最佳选择。我也准备在 class 中实现这个逻辑。

Answer 1

这不起作用，因为 includes 不测试多个术语的情况。你没有说 items Array 里面有什么，但如果它是一个字符串，你可以这样做：

transform(items: any[], terms: string): any[] {
    if(!items) return [];
    if(!terms) return items;
    terms = terms.toLowerCase();
    return items.filter( it => {
      //if it is something like "Programmer 07 November 12:00PM"
      var informations = it.split(' '); //["Programmer", "07" ,"November" ,"12:00PM"]
      var termArray = terms.split(' ');
      var rightResult = true;
      for (var index in termArray) {
       if !(informations.include(termArray[index])) {
         rightResult = false;
       }
       return rightResult;


    });
  }

Answer 2

在搜索管道的转换方法中，对所有要应用过滤器的字段应用过滤器。以下将搜索对象中的所有键：

transform(items: any[], terms: string): any[] {
    if(!items) return [];
    if(!terms) return items;
    terms = terms.toLowerCase();
    return items.filter( it => {

       return keys(it).reduce((prev, key) => {
          return prev || key.toLowerCase().includes(term);
       }, false);
    });
}

如果按键或 Object.keys 不起作用，请使用以下代码代替 reduce 函数：

...
let bInclude = false;
for(let key in it){
  bInclude = bInclude || key.toLowerCase().includes(term);
}

return bInclude;
...

Answer 3

试试这个代码..它很简单。

  transform(items: any[], terms: string): any[] {
    if (!items) return [];
    if (!terms) return items;
    terms = terms.toLowerCase();
    terms = terms.trim();
    return items.filter(it => {
      if (it.day) {
        return it.day.toLowerCase().includes(terms);
      }
      if (it.month) {
        return it.month.toLowerCase().includes(terms);
      }
      if (it.time) {
        return it.time.toLowerCase().includes(terms);
      }
      if (it.name) {
        return it.name.toLowerCase().includes(terms);
      }
    });
  }

如果您的 JSON 有空值，您可以使用以下代码将其替换为空字符串：

items = JSON.parse(JSON.stringify(items).replace(/null/g, '""'));

Answer 4

尝试将您的 includes 与 logical or-operator (||) 结合起来：

transform(items: any[], terms: string): any[] {
    if (!items) return [];
    if (!terms) return items;
    terms = terms.toLowerCase();
    return items.filter(it => {
      return it.name.toLowerCase().includes(terms) ||
        it.day.toLowerCase().includes(terms) ||
        it.month.toLowerCase().includes(terms) ||
        it.time.toLowerCase().includes(terms)
    });
}

如果 includes return 中的任何一个为真，则此语句将 return 为真。所以基本上 name、day、month 或 time 包含搜索项的任何项目都将被管道 return 编辑。

此解决方案假定 name、day、month 和 time 不为空或未定义。但我假设这没问题，因为您的示例数据表明空值将是空字符串 ("")。如果我的假设不正确，您必须在访问它们之前检查是否已分配值。

Answer 5

filterItems（参数：任意）：void { 让 val: string = param;

if (val) {
  if (val.trim() !== '') {
    this.filterItemsList = this.items.filter((data) => {
      console.log(data.category);
      return data.category.toLowerCase().indexOf(val.toLowerCase()) > -1
        || data.products.some(product => product.code.toLowerCase().indexOf(val.toLowerCase()) > -1);
    })
  }
}

}

它运行完美

基于多个字段的过滤列表

Filter list based on more than one field

ionic-framework

ionic2

ionic3