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

Question

如何过滤具有多个参数的数据？我想在我的过滤器中使用多个值，并将它们与and条件结合起来。正如您在图像中看到的，假设我输入and in表示PQR我只想要is和is 的记录。OrganizationMondSales PersonOrganizationPQRSales PersonMond

即结合这些条件，但我得到的问题是，如果我结合这些条件而其他输入(filters)为空白，我不会返回任何数据。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;
  }

}

图片便于理解

标签： javascriptangular

Answer 1

您可以分阶段使用多个过滤器，这样您就可以实现更复杂的匹配逻辑，而不仅仅是===：

const filteredReport = this.reports
    .filter(report => {
        if (!this.organizationFilter) return true // don't filter if blank
        else return report.organization === this.organizationFilter
    })
    .filter(report => {
        if (!this.customerFilter) return true
        else return report.customer === this.customerFilter
    })
    .filter(report => {
        if (!this.salesPerson) return true
        else return report.salesPerson === this.salesPersonFilter
    })
    .filter(report => {
        if (!this.itemFilter) return true
        else return report.item === this.itemFilter
    })
    .filter(report => {
        if (!this.authorizingOfficerFilter) return true
        else return report.authorizingOfficer === this.authorizingOfficerFilter
    });

如果你像我一样懒惰，你甚至可以做一些元编程并在循环中执行此操作：

let filteredReport = this.reports.slice();

[
    'organization',
    'customer',
    'salesPerson',
    'item',
    'authorizingOfficer'

].forEach(attr => {
    filteredReport = filteredReport.filter(report => {
        if (!this[attr + 'Filter']) return true
        else return report[attr] === this[attr + 'Filter']
    });
});

虽然我个人此时会重命名过滤器this.filters.customer等，以便过滤器代码更清晰：

        if (!this.filters[attr]) return true
        else return report[attr] === this.filters[attr]