Order list ionic 2

Ionic Framework ionic-v3
1

I have a page with one list from a JSON file. What I want to do it’s to add an order by funcionality. I don’t understand yet if I need to use @Pipe or if there is a simpler way. I’m planning to do it in a modal page. Thanks in advance any help will be appreciated.
modalpage.html:

 <ion-toolbar danger>
  <ion-buttons start>
    <button (click)="close()">
      <ion-icon ios="ios-close" md="md-close"></ion-icon>
    </button>
  </ion-buttons>
  <ion-title  text-center>
    Ajustes
  </ion-title>
  <ion-buttons end>
    <button (click)="applyFilters()">
      <ion-icon ios="ios-checkmark" md="md-checkmark"></ion-icon>
    </button>
  </ion-buttons>
</ion-toolbar>	
<ion-content padding class="rojo">
  <h2 text-center>Ordenar resultados por:</h2>
</ion-content>

modalpage.js

import {Page, NavController,ViewController} from 'ionic-angular';

@Page({
  templateUrl: 'build/pages/ajustes-listado/ajustes-listado.html',
})
export class AjustesListadoPage {
  static get parameters() {
    return [[NavController],[ViewController]];
  }

  constructor(nav, viewController) {
    this.nav = nav;
    this.viewCtrl = viewController;
  }

  close(data) {
    this.viewCtrl.dismiss(data);
  }
  applyFilters(){
    console.log('aplicando filtros a la lista');
    this.close();
  }
}

list.html

<ion-navbar *navbar danger>
    <ion-title text-center>Listado</ion-title>
    <ion-buttons start *ngIf="buscar==false">
    <button (click)="search()">
      <ion-icon ios="ios-search" md="md-search"></ion-icon>
    </button>
  </ion-buttons>
  <ion-buttons end>
    <button (click)="options()">
      <ion-icon ios="ios-options" md="md-options"></ion-icon>
    </button>
  </ion-buttons>
</ion-navbar>
<ion-content class="listado">
      <ion-list [virtualScroll]="vets">
        <button ion-item text-wrap *virtualItem="let vet" (click)="goToDetails(vet)">
            <ion-avatar item-left>
                <!-- <ion-img [src]="vet.img || defaultImg"></ion-img> -->
                <img src="{{vet.img}}" onError="this.src='./files/gmaps.png';" />
            </ion-avatar>
            <h2>{{vet.nombre}}</h2>
            <p>Direccion: {{vet.direccion}}</p>
        </button>
    </ion-list>
</ion-content>

list.js

import {DetallesPage} from '../detalles/detalles';
import {OnInit} from '@angular/core';
import {Page, NavController, Platform, NavParams, Modal} from 'ionic-angular';
import {MiServicio} from '../../providers/mi-servicio/mi-servicio';
import {AjustesListadoPage} from '../ajustes-listado/ajustes-listado';

@Page({
  templateUrl: 'build/pages/listado/listado.html',
  providers:[MiServicio]
})
export class ListadoPage {
  static get parameters() {
    return [[NavController],[Platform],[MiServicio]];
  }

    constructor(nav,platform, miServicio) {
    this.nav = nav;
    this.platform = platform;
    this.miServ = miServicio;
    this.ngOnInit();
  }

  ngOnInit() {
    this.miServ.getVets().subscribe(
        data => this.vets = data
    );
  }    
}
2

I don’t understand why there are two pages here, but assuming for the moment that that’s important, and further assuming that applyFilters is intended to be sorting or filtering the data that is in list.js, what I would do is to declare some sort of enumeration covering the various sort types - ascending, descending, whatever. I would return this instead of data from AjustesListadoPage.dismiss(), declare an onDismisshandler in the part of ListadoPage that presents AjustesListadoPage which will receive the desired sort operation and can perform it on data.

3

Hi @rapropos thanks for your answer. The two pages are because one is the modal for filters and the other is the list itself, I don’t know if this modal I can make it on the same page. My question now is how can I make this “sort of enumeration covering the various sort types” I have found examples but with pipes and filtering lists. What I want to do is to order by name or distance this variable comes from another page.

4

What I would do is just put a “sort by” radio group of “name” and “distance” on the same page as the list, and have a selection change listener that sorts the list.

If you still want to do it with two pages, I don’t think JavaScript has a proper enumerated type, so you would probably have to use a string or number, so you’d call dismiss('sortByName') or dismiss('sortByDistance'), and use onDismiss to do the sorting based on what was returned from the modal.