javascript - 在 Angular 中基于多个参数过滤数据

Question

我的表单中有一个对象数组，其中可以有两个以上的对象。这是我从服务器获取的数据。

[
        {processId : 1, processName : "process1", country : "germany", companyCode:"IB" , companyHiringType:"FRE", masterClauses:[
      {clauseName : "tst dummy", description : "dummy desc",  clauseId : 1, parentClause : null, titleDisplayFlag :false, textFlag: false, clauseType:"" , processid: 1, subClauseId:null, subClauseSequence:null ,texts :[
        {text : "dummy",textId : 1, sequenceNo :1}
      ]}
    ]},

        {processId : 2, processName : "process2", country : "Finland", companyCode:"IL" , companyHiringType:"Lat", masterClauses:[
      {clauseName : "test1", description : "test1Demo",  clauseId : 1, parentClause : null, titleDisplayFlag :false, textFlag: false, clauseType:"" , processid: 2, subClauseId:null, subClauseSequence:null ,texts :[
        {text : "dummy text",textId : 1, sequenceNo: 1}
      ]}
    ]}
  ]
  ]

我的 html 中有一个表单

<form #filterForm="ngForm" (ngSubmit)="addFilter(filterForm)" autocomplete="off">
      <h4 class="h4Header">Filter by
        <a href="javascript:void(0)"  (click)=closeRightMenu($event) class="filterClose icon x-24 close-icon float-right"></a>
      </h4>
      <!-- -->
      <mat-accordion class="cus-accordion">


        <mat-expansion-panel>
          <mat-expansion-panel-header>
            <mat-panel-title>Company</mat-panel-title>
          </mat-expansion-panel-header>
          <mat-radio-group required [ngModel]="selected" class="custom-radio block-radio-group"  aria-label="Select an option"  name="companyCode">
            <mat-radio-button class="block-radio-button"  *ngFor="let com of companyA;index as i"  [value]="com"  disableRipple="true">{{com}}</mat-radio-button>
          </mat-radio-group>
        </mat-expansion-panel>

        <mat-expansion-panel>
          <mat-expansion-panel-header>
            <mat-panel-title>Country</mat-panel-title>
          </mat-expansion-panel-header>
          <mat-radio-group required [ngModel]="selected" class="custom-radio block-radio-group"  aria-label="Select an option"  name="country">
            <mat-radio-button class="block-radio-button"  *ngFor="let com of country;index as i"  [value]="com.countryName"  disableRipple="true">{{com.countryName}}</mat-radio-button>
          </mat-radio-group>
        </mat-expansion-panel>

        <mat-expansion-panel>
          <mat-expansion-panel-header>
            <mat-panel-title>Process</mat-panel-title>
          </mat-expansion-panel-header>
          <mat-radio-group required [ngModel]="selected" class="custom-radio block-radio-group"  aria-label="Select an option"  name="companyHiringType">
            <mat-radio-button class="block-radio-button"  *ngFor="let com of hiring;index as i"  [value]="com"  disableRipple="true">{{com}}</mat-radio-button>
          </mat-radio-group>
        </mat-expansion-panel>

        <mat-expansion-panel>
          <mat-expansion-panel-header>
            <mat-panel-title>Module</mat-panel-title>
          </mat-expansion-panel-header>
          <mat-radio-group required [ngModel]="selected" class="custom-radio block-radio-group"  aria-label="Select an option"  name="processName">
            <mat-radio-button class="block-radio-button"  *ngFor="let com of moduleA;index as i"  [value]="com.processName"  disableRipple="true">{{com.processName}}</mat-radio-button>
          </mat-radio-group>
        </mat-expansion-panel>
    </mat-accordion>
    <div class="bottomUtil">
      <div class="row nomarLR padTB16">
        <div class="col-6 padR8">
          <button mat-flat-button class="primary-btn btnfullWdth" type="submit">Apply</button>
        </div>
        <div class="col-6 padL8">
          <button mat-flat-button class="secondary-btn btnfullWdth" (click)="testingButton()">Reset</button>
        </div>

      </div>
    </div>
    </form>

用户从单选按钮中选择值，其后显示的数据应基于所选的单选按钮。例如，如果用户选择

processName : "process1", country : "germany", companyCode:"IB" and companyHiringType:"FRE"

我要显示的数据是

clauseName : "tst dummy", description : "dummy desc" and from the nested array I should get text : "dummy"

有没有办法可以根据 4 个参数过滤数据？

Answer 1

根据理解您的代码/问题

这是来自服务器的数据

var data = [
  {
    processId: 1,
    processName: "process1",
    country: "germany",
    companyCode: "IB",
    companyHiringType: "FRE",
    masterClauses: [
      {
        clauseName: "tst dummy",
        description: "dummy desc",
        clauseId: 1,
        parentClause: null,
        titleDisplayFlag: false,
        textFlag: false,
        clauseType: "",
        processid: 1,
        subClauseId: null,
        subClauseSequence: null,
        texts: [
          {
            text: "dummy",
            textId: 1,
            sequenceNo: 1
          }
        ]
      }
    ]
  },
  {
    processId: 2,
    processName: "process2",
    country: "Finland",
    companyCode: "IL",
    companyHiringType: "Lat",
    masterClauses: [
      {
        clauseName: "test1",
        description: "test1Demo",
        clauseId: 1,
        parentClause: null,
        titleDisplayFlag: false,
        textFlag: false,
        clauseType: "",
        processid: 2,
        subClauseId: null,
        subClauseSequence: null,
        texts: [
          {
            text: "dummy text",
            textId: 1,
            sequenceNo: 1
          }
        ]
      }
    ]
  }
];

让我假设你的filterObject应该如下所示(它会被选择或不被选择)

var filterObj = {
  country: "germany",
  companyCode: null,
  companyHiringType: null,
  processName: "process1"
};

您选择或不选择单选按钮的位置(如果未选择，则该属性的值为空)

这是过滤数据的逻辑

var f = data.filter(a => {
  return (filterObj.country == null || filterObj.country == a.country)
    && (filterObj.companyCode == null || filterObj.companyCode == a.companyCode)
    && (filterObj.companyHiringType == null || filterObj.companyHiringType == a.companyHiringType)
    && (filterObj.processName == null || filterObj.processName == a.processName);
});

这是你的结果

console.log(f);

希望这对您有帮助。

如果您需要更多信息或对此不清楚或有问题，请告诉我。

注意:我只给出了根据 4 个参数过滤数据的代码(如果参数/属性有值或没有值)

谢谢