Filter data based on multiple parameters in Angular

Question

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?

Hi, it would be quite helpful if you prepared a stackblitz with your code. — igg
– igg, Commented Dec 16, 2019 at 15:41
(stackblitz.com/edit/angular-tt9oxu) This is something I was working on, when you save after selecting the radio buttons, console has an object which i want to use to filter my result. Please let me know If you want me to update the Code. I am using the radio buttons as form to push the data in finalArray in ser.services.ts and I want to use the object in console to filter. — MenimE
– MenimE, Commented Dec 16, 2019 at 16:02
I'm not sure I understand exactly what you want to filter. For example, in your array of object you only want to show the ones where country is germany if that radio is selected? Also, how does that array of object relate to your form, sorry I'm having trouble understanding. — igg
– igg, Commented Dec 16, 2019 at 16:09
i want to show data where, for example, country is germany, process name is process1, companyCode is IB and companyHiringType is FRE, all together. Like one of them online shopping sites where you can select multiple filters and product is displayed accordingly — MenimE
– MenimE, Commented Dec 16, 2019 at 16:12
Hi again! In your stackblitz, where is the data you get from the server? (where are you storing it?) — Nicholas K
– Nicholas K, Commented Dec 16, 2019 at 16:33

kushal shah · Accepted Answer · 2019-12-16 17:59:17Z

1

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

edited Dec 16, 2019 at 17:59

answered Dec 16, 2019 at 17:27

kushal shah

8636 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

MenimE Over a year ago

the "data" here, Is it an array that I will have to define somewhere or is it something else

kushal shah Over a year ago

ohh soryy, i forgot to declare data var, in your case it will came from server but stll i have edit answer look into and let me know if need anything more

MenimE Over a year ago

hi kushal, i have updated the code. Would you please help me with [this] (stackoverflow.com/questions/59379976/…) Will we be able to use your filtering method in this condition?

kushal shah Over a year ago

hi Menime please check stackoverflow.com/questions/59379976/… and try using that solution, let me know after using it. thanks

Collectives™ on Stack Overflow

Filter data based on multiple parameters in Angular

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related