I have 2 dropdown in HTML, namely Sort By and order by.

Sort -   ['SKU', 'Planned', 'Actual', 'Variation', 'OR%']
Order By - ['A-Z', 'Z-A'];

In UI user will select Sort dropdown and Order By dropdown, Based on the selected values i am sorting the data.

I did below code which was working fine but i am looking for some common logic like switch case or any other minimal and redundant code.

Can anyone help me to create some common function logic instead of multiple if else.

HTML code

<mat-label>Order By:</mat-label>
            <mat-select   (selectionChange)="sortData()"  formControlName="orderBy">
                <mat-option *ngFor="let type of sortValue" [value]="type"> {{type}}
                </mat-option>
            </mat-select>
       
     
            <mat-label>Sort By :</mat-label>
            <mat-select (selectionChange)="sortData()"  formControlName="sortBy">
                <mat-option *ngFor="let column of columnName" [value]="column"> {{column}}
                </mat-option>
            </mat-select>

Below is my code

sortData() {  
    const sort = this.orLosstreeSortingForm.controls['sortBy'].value;
    const orderBy = this.orLosstreeSortingForm.controls['orderBy'].value;
    if (sort === 'SKU' && orderBy === 'A-Z' || sort === 'SKU' && orderBy === 'Z-A') {
      const direction = orderBy === 'A-Z' ? 1 : -1;
      this.setDataResponse.factORLossTree.sort((a, b) => a.skuDescription.localeCompare(b.skuDescription) * direction);
    }
    if (sort === 'Planned' && orderBy === 'A-Z') {
      this.setDataResponse.factORLossTree.sort((a, b) => a.plannedVolume - b.plannedVolume);
    }
    else if (sort === 'Planned' && orderBy === 'Z-A') {
      this.setDataResponse.factORLossTree.sort((a, b) => b.plannedVolume - a.plannedVolume);
    }
    if (sort === 'Actual' && orderBy === 'A-Z') {
      this.setDataResponse.factORLossTree.sort((a, b) => a.actualVolume - b.actualVolume);
    }
    else if (sort === 'Actual' && orderBy === 'Z-A') {
      this.setDataResponse.factORLossTree.sort((a, b) => b.actualVolume - a.actualVolume);
    }
    if (sort === 'Variation' && orderBy === 'A-Z') {
      this.setDataResponse.factORLossTree.sort((a, b) => a.variance - b.variance);
    }
    else if (sort === 'Variation' && orderBy === 'Z-A') {
      this.setDataResponse.factORLossTree.sort((a, b) => b.variance - a.variance);
    }
}

API Response

this.setDataResponse.factORLossTree = [
    {
        actualVolume: 6598
        or: 30.268
        plannedVolume: 26798
        skuDescription: "Blue DWLREG POUCH 20X750ML"
        variance: 15200
    },
    {
        actualVolume: 6200
        or: 13.345
        plannedVolume: 25800
        skuDescription: "Red DWLREG POUCH 20X750ML"
        variance: 16000
    },
    {
        actualVolume: 4500
        or: 22
        plannedVolume: 21798
        skuDescription: "ABC DWLREG POUCH 20X750ML"
        variance: 16500
    },
    {
        actualVolume: 2500
        or: 24.268
        plannedVolume: 22798
        skuDescription: "Test DWLREG POUCH 20X750ML"
        variance: 17000
    }
];

CodePudding user response：

You can create a new customSortFunction:

function customSortFunction(arr, sortField, direction){  
    return arr.sort((a,b)=>{
        if(isNaN(a[sortField])){ // compare strings
          return a[sortField].localeCompare(b[sortField]) * direction;
        }else{// compare numbers
             // you can also do a parseInt() here in case of the field value is "123"
            return (a[sortField] - b[sortField]) * direction ;
        }
    })  ; 
}

And call this function in yours. Somethink like this:

sortData() {  
      const sort = this.orLosstreeSortingForm.controls['sortBy'].value;
      const orderBy = this.orLosstreeSortingForm.controls['orderBy'].value; 
      const direction = orderBy === 'A-Z' ? 1 : -1;
      const sortField={
        'SKU':'skuDescription', 
        'Planned':'plannedVolume', 
        'Actual':'actualVolume', 
        'Variation':'variance', 
        'OR%':'or'
      };
      const sortedArray = this.customSortFunction(
            this.setDataResponse.factORLossTree, 
            sortField[sort],
            direction);       
 }

CodePudding user response：

**

ts code

**

items = [
    {
      actualVolume: 1,
      skuDescription: 'A',
      variance: 15,
    },
    {
      actualVolume: 2,
      skuDescription: 'C',
      variance: 16,
    },
    {
      actualVolume: 3,
      skuDescription: 'D',
      variance: 14,
    },
    {
      actualVolume: 4,
      skuDescription: 'B',
      variance: 17,
    },
  ];
  sort = ['skuDescription', 'actualVolume', 'variance'];
  orderby = ['A-Z', 'Z-A'];
  selectedtype: string;
  selectedorder: string;
  sortdata(type, order) {
    if (order === 'A-Z') {
      this.items.sort((a, b) => 0 - (a[type] > b[type] ? -1 : 1));
    } else {
      this.items.sort((a, b) => 0 - (a[type] > b[type] ? 1 : -1));
    }
  }

**

Html code

**

<span *ngFor="let i of items" style="display: flex">
  {{ i.skuDescription }}
</span>

<select [(ngModel)]="selectedtype">
  <option *ngFor="let type of sort">{{ type }}</option>
</select>
<select [(ngModel)]="selectedorder">
  <option *ngFor="let type of orderby">{{ type }}</option>
</select>
<button label="sort" (click)="sortdata(selectedtype, selectedorder)">
  Sort
</button>