基于多个字段的过滤列表 [英] Filter list based on more than one field

问题描述

我正在迭代作业列表，并且在该列表上执行了搜索. 搜索正在运行，但现在仅根据一个字段过滤列表.

I'm iterating a list of jobs and there's a search implemented on this list. Search is working but now it only filters list based on one field.

这是我的清单:

<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>

我做了一个实现搜索的管道.这是它的代码.

I made a pipe for implementing search. Here's the code for it.

  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过滤列表.

Now the list gets filtered only based on the name field. I wanna filter the list based on day, month and time as well.

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

Can anyone tell me how to make this happen?

作业的样本数据.乔布斯是一个对象数组

Sample Data for Jobs. Jobs is an array of objects

   [  
      {  
         "id":10,
         "day":"Monday",
         "month":"June",
         "time":"10",
         "name":"John",
         "email":"[e-mail]"
      },
      {  
         "id":11,
         "day":"Tuesday",
         "month":"May",
         "time":"12",
         "name":"Jane",
         "email":"[e-mail]"
      },
      {  
         "id":12,
         "day":"Friday",
         "month":"June",
         "time":"16",
         "name":"",
         "email":"[e-mail]"
      },
      {  
         "id":13,
         "day":"Tuesday",
         "month":"August",
         "time":"21",
         "name":"",
         "email":"[e-mail]"
      },
      {  
         "id":14,
         "day":"Saturday",
         "month":"December",
         "time":"12",
         "name":"Sam",
         "email":"[e-mail]"
      },

   ]

searchTerm只是一个字符串.

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

As you can see, there are more fields in the sample data than the one displayed in the HTML but I'm trying only to search for the fields that are displayed in the HTML. Some fields can have null values (for eg. name in the sample data has two null values)

我尝试了已经提供的解决方案，但是没有一个可以满足我的要求.

I tried the solutions already provided but none of them are working for my requirement.

P.S:在某处读到管道并不是实现这种功能的最佳选择.我也准备在课堂上实现这种逻辑.

P.S: Read somewhere that pipes are not the best option to do functionality like this. I'm ready to implement this logic in the class as well.

推荐答案

尝试此代码..非常简单.

Try this code.. it's pretty simple.

  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具有空值，则可以使用以下代码将其替换为空字符串:

If your JSON has null values, you can replace it with an empty string using the following code:

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

这篇关于基于多个字段的过滤列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！