javascript - 如何过滤具有多个参数的javaScript数组

Question

如何过滤多个参数的数据？ 我想在过滤器中使用多个值，并将它们与 and 条件组合起来。 如图所示，假设我在 Organization 中输入 PQR，在 Sales Person 中输入 Mond，这意味着我只需要其中组织为PQR且销售人员为Mond的记录。

即组合这些条件，但我遇到的问题是，如果我组合这些条件而其他输入(过滤器)为空，我不会返回任何数据。 我的代码在 OR 条件(其中任何条件都匹配)的情况下完美运行。如何通过组合上述查询来实现相同类型的输出 这是我的代码文件，executeFilters() 是我正在尝试的函数

import { Component, OnInit, ViewChild } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { Router } from '@angular/router';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { CollectionReportService } from '../../../../../app/services/reportServices/collection-report.service';

@Component({
  selector: 'app-collections-report',
  templateUrl: './collections-report.component.html',
  styleUrls: ['./collections-report.component.scss']
})
export class CollectionsReportComponent implements OnInit {
  dataArrived = false;
  // tslint:disable-next-line: max-line-length
  displayedColumns: string[] = ['date', 'invoice', 'organization', 'customer', 'salesPerson', 'authorizingOfficer', 'item', 'terms', 'ageing', 'quantity', 'price', 'amount', 'dueAmount'];
  footerColumns: string[] = ['amount', 'dueAmount'];
  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
  @ViewChild(MatSort, { static: true }) sort: MatSort;
  dataSource: any;
  organizationFilter;
  customerFilter;
  salesPersonFilter;
  authorizingOfficerFilter;
  itemFilter;
  constructor(
    private router: Router,
    private collectionReportService: CollectionReportService
  ) { }
  reports = [
    { date: '10 - Oct', invoice: '1009', organization: 'ABC', customer: 'Kevin', salesPerson: 'KEN', authorizingOfficer: 'Ayub', item: 'Jiko', terms: '3', ageing: '4', quantity: '1', price: '3990.00', amount: 3990.00, dueAmount: 1330.00 },
    { date: '10 - Oct', invoice: '1009', organization: 'DEF', customer: 'Lorem', salesPerson: 'Brown', authorizingOfficer: 'Wah', item: 'Okoa', terms: '3', ageing: '4', quantity: '1', price: '3990.00', amount: 3990.00, dueAmount: 1330.00 },
    { date: '10 - Oct', invoice: '1009', organization: 'GHI', customer: 'Ipsum', salesPerson: 'Red', authorizingOfficer: 'IT', item: 'Mishi', terms: '3', ageing: '4', quantity: '1', price: '3990.00', amount: 3990.00, dueAmount: 1330.00 },
    { date: '10 - Oct', invoice: '1009', organization: 'JKL', customer: 'Some', salesPerson: 'Mister', authorizingOfficer: 'Intel', item: 'Chilli', terms: '3', ageing: '4', quantity: '1', price: '3990.00', amount: 3990.00, dueAmount: 1330.00 },
    { date: '10 - Oct', invoice: '1009', organization: 'MNO', customer: 'Frio', salesPerson: 'Kevi', authorizingOfficer: 'Red', item: 'Hitachi', terms: '3', ageing: '4', quantity: '1', price: '3990.00', amount: 3990.00, dueAmount: 1330.00 },
    { date: '10 - Oct', invoice: '1009', organization: 'PQR', customer: 'Litm', salesPerson: 'Bang', authorizingOfficer: 'Mond', item: 'Hari', terms: '3', ageing: '4', quantity: '1', price: '3990.00', amount: 3990.00, dueAmount: 1330.00 },
    { date: '10 - Oct', invoice: '1009', organization: 'STU', customer: 'Nats', salesPerson: 'Elite', authorizingOfficer: 'Amd', item: 'Kara', terms: '3', ageing: '4', quantity: '1', price: '3990.00', amount: 3990.00, dueAmount: 1330.00 },
    { date: '10 - Oct', invoice: '1009', organization: 'VWX', customer: 'Doda', salesPerson: 'Sniper', authorizingOfficer: 'Great', item: 'Yoko', terms: '3', ageing: '4', quantity: '1', price: '3990.00', amount: 3990.00, dueAmount: 1330.00 },
    { date: '10 - Oct', invoice: '1009', organization: 'XYZ', customer: 'Hima', salesPerson: 'Uni', authorizingOfficer: 'Silver', item: 'Hama', terms: '3', ageing: '4', quantity: '1', price: '3990.00', amount: 3990.00, dueAmount: 1330.00 },
    { date: '10 - Oct', invoice: '1009', organization: 'Foo', customer: 'Imk', salesPerson: 'Ten', authorizingOfficer: 'Some', item: 'Spoon', terms: '3', ageing: '4', quantity: '1', price: '3990.00', amount: 3990.00, dueAmount: 1330.00 },
    { date: '10 - Oct', invoice: '1009', organization: 'Bar', customer: 'Tyw', salesPerson: 'Ben', authorizingOfficer: 'Other', item: 'Jiko Okoa', terms: '3', ageing: '4', quantity: '1', price: '3990.00', amount: 3990.00, dueAmount: 1330.00 },
  ];



  ngOnInit(): void {
    this.dataSource = new MatTableDataSource(this.reports);
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
    this.collectionReportService.getReport().subscribe(resp => console.log('Response of collectionReport: ', resp), error => console.log('Error occured while fetching report: ', error));
  }

  applyFilter(filterValue: string): void {
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }
  getTotalAmount(): number {
    return this.reports.map(r => r.amount).reduce((acc, value) => acc + value, 0);
  }
  getTotalAmountDue(): number {
    return this.reports.map(r => r.dueAmount).reduce((acc, value) => acc + value, 0);
  }
  exportCSV(): void {
    alert('Export function called');
  }

  executeFilters(): void {
    console.log('Organization: ', this.organizationFilter, 'Customer: ', this.customerFilter, 'Sales Person: ',
      this.salesPersonFilter, 'Authorizing Officer: ', this.authorizingOfficerFilter, 'Item: ', this.itemFilter);

    const filteredReport = this.reports.filter(report => report.organization === this.organizationFilter ||
      report.customer === this.customerFilter || report.salesPerson === this.salesPersonFilter || report.item === this.itemFilter ||
      report.authorizingOfficer === this.authorizingOfficerFilter || report.item === this.itemFilter);

    this.dataSource = new MatTableDataSource(filteredReport);
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;

  }
  resetFilters(): void {
    console.log('Filter reset');
    this.organizationFilter = '';
    this.customerFilter = '';
    this.salesPersonFilter = '';
    this.authorizingOfficerFilter = '';
    this.itemFilter = '';


    this.dataSource = new MatTableDataSource(this.reports);
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }

}

图片方便理解

Answer 1

您说过您想使用 AND 条件，但当您这样做时，并非所有过滤器都有值，所有内容都会被过滤掉。我假设您的函数有一个 && 版本(在问题中您仍然有 ||)。

在应用过滤器之前，您需要检查是否有过滤器的值:

const filteredReport = this.reports.filter(report =>
  (!this.organizationFilter || report.organization === this.organizationFilter) &&
  (!this.customerFilter || report.customer === this.customerFilter) &&
  (!this.salesPersonFilter || report.salesPerson === this.salesPersonFilter) &&
  (!this.itemFilter || report.item === this.itemFilter) &&
  (!this.authorizingOfficerFilter || report.authorizingOfficer === this.authorizingOfficerFilter) &&
  (!this.itemFilter || report.item === this.itemFilter)
);

该列表中的每个条件的形式如下:

(!fieldFilterValue || report.field === fieldFilterValue)

...这意味着如果 A) 不存在 fieldFilterValue(例如，它是假的)或 B) 有一个并且报告与之相符。

然后将它们全部通过 && 连接在一起，因此整个过滤器是一个 AND 过滤器。

请注意，虚假检查 (!fieldFilterValue) 可能适合也可能不适用于您的所有字段，因此如有必要请对其进行调整。例如，如果您有一个数字字段，并且您想要搜索该数字字段的值为 0 的报表，则上面的代码将不起作用。在这种情况下，当未使用该过滤器时，您可以使用 null 作为 fieldFilterValue 的值，并将上面的代码调整为:

const filteredReport = this.reports.filter(report =>
  (this.organizationFilter === null || report.organization === this.organizationFilter) &&
  (this.customerFilter === null || report.customer === this.customerFilter) &&
  (this.salesPersonFilter === null || report.salesPerson === this.salesPersonFilter) &&
  (this.itemFilter === null || report.item === this.itemFilter) &&
  (this.authorizingOfficerFilter === null || report.authorizingOfficer === this.authorizingOfficerFilter) &&
  (this.itemFilter === null || report.item === this.itemFilter)
);

<小时/>

旁注:我很想通过使用 filters 对象而不是单独的 organizationFilter、customerFilter 来避免使用这样的一长串过滤器 等属性:

this.filters = {
  organization: null,
  customer: null,
  salesPerson: null,
  item: null,
  authorizingOfficer: null,
  item: null,
};

然后这样做:

const filteredReport = this.reports.filter(report =>
  Object.entries().every(([key, value]) => value === null || report[key] === value)
);

这样做的缺点是您无法再搜索 organizationFilter 并找到它的所有用途...