CODEWITHSUNDEEP
javascripthtmlarraysangulartypescript
MenimE
MenimE

Reputation: 304

Filter data based on multiple parameters in Angular

I have an array of objects in the form, which can have more than 2 objects. This is the data I get from the server. 

[
        {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}
      ]}
    ]}
  ]
  ]

I have a form in my 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>

The user selects the value from the radio buttons and the data displayed after it should be based on the radio buttons selected. For example, if the user selects

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

The data I want to be displayed is 

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

Is there a way we can filter the data based on 4 parameters?

Upvotes: 0

Views: 409

Answers (1)

kushal shah
kushal shah

Reputation: 863

as per understanding your code/problem

Here is the data which will came from server

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
          }
        ]
      }
    ]
  }
];

let me assume your filterObject should be like below(it would b selected or not)

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

where you are selecting or not selecting radio buttons (if not selected than the value of that property would be null)

and here is the logic for filter data 

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);
});

Here is your result 

console.log(f);

hope this will help you.

let me know if you need anything more or not clear about this or something wrong.

Note : I have given only that code which will filter data based on 4 parameters (if paramter/property have value or not)

thanks

Upvotes: 1

Related Questions