Search code examples
angulartypescriptsortingpipengfor

Angular sort items in object

MARKUP

 <ion-content>
    <ion-list *ngFor="let todosPaises of crossCountriesData">
        <ion-item lines="inset" *ngFor="let dados of todosPaises.response | orderBy">
            {{ dados.cases.active }}
        </ion-item>
    </ion-list>
</ion-content>

TYPESCRIPT

this.crossCountries = this.api.getCrossCountries();
        this.crossCountries.forEach(item => {
            this.crossCountriesData.push(item);
            console.log('my data: ', this.crossCountriesData);
        });

PIPE

import { Pipe, PipeTransform } from "@angular/core";

@Pipe({
  name: "orderBy"
})
export class OrderByPipe implements PipeTransform {
  transform(value: object[], sortFunction?: any): any[] {
    return value.sort(sortFunction);
  }
}

OBJECT

enter image description here

QUESTION

In a IONIC app i'm trying to sort from greater to smallest by number of active cases, but the pipe i made is not solving the issue.

Can anyone show me the proper way?

Solution

  • Your OrderByPipe function takes an additional argument which is the function passed to sort, looking at your code, that function is never passed, you should define such a function in your component next pass it to the pipe as an argument, as demonstrated below:

    Component:

    public orderByMethod = (x, y) => y.cases.active - x.cases.active;

    Template:

    <ion-content>
  <ion-list *ngFor="let todosPaises of crossCountriesData">
    <ion-item lines="inset"
      *ngFor="let dados of todosPaises.response | orderBy : orderByMethod">
      {{ dados.cases.active }}
    </ion-item>
  </ion-list>
</ion-content>