Sorting ion-items alphabetically with different languages

Ionic Framework ionic-v3
1

Hi there, I am creating an app where a user sees a list that needs to be sorted alphabetically. The app is offered in two languages, so the translate pipe needs to be integrated into it in some way.

This is my current code:

<ion-list>
  <ion-item *ngFor="let f of foods">
    <p>{{ f.name | translate }}</p>
  </ion-item>
</ion-list>

Is there any way I can sort them alphabetically (using f.name) in both languages using a pipe or something similar?

Let me know if I need to clarify anything.

Thank you.

2

I ended up doing it like this, with no pipe:

  translateFood(name) : string {
    this.translate.get(name).subscribe(
      value => {
        this.translated_food = value;
      }
    )

    return this.translated_food;
  }

  ionViewDidEnter() {    
    // alphabetical sort
    this.foodStore.foods = this.foodStore.food.sort((a, b) =>
      this.translateFood(a.food).localeCompare(this.translateFood(b.food))
    );
  }
3

I wonder if this will help. This tutorial shows you how to sort list items:

4

another sort example:

1 Like