1

I have ionic 2 app and old version of angularjs, so it have no orderby pipe by default.. so I have array like this

  <div *ngFor="let boatBooking of boatBookings" style="padding: 0px; margin:0px;">
  <ion-item>

        <ion-icon *ngIf="boatBooking.status !== 3" name="boat" item-left></ion-icon>
        <h3 *ngIf="boatBooking.status !== 3">{{ boatBooking.boat.name }}</h3>
        <p *ngIf="boatBooking.status !== 3"><small><strong>{{ boatBooking.date | date: 'dd/MM/y' }}</strong></small></p>

        <ion-icon *ngIf="boatBooking.status === 3" style="color:#d0d0d0!important" name="boat" item-left></ion-icon>
        <h3 *ngIf="boatBooking.status === 3" style="color:#d0d0d0!important">{{ boatBooking.boat.name }}</h3>
        <p *ngIf="boatBooking.status === 3" style="color:#d0d0d0!important"><small><strong>{{ boatBooking.date | date: 'dd/MM/y' }}</strong></small></p>   

        <ion-note *ngIf="boatBooking.status !== 3" item-end><div style="background:#f53d3d;" class="ppoints">-{{ boatBooking.boat.pointsPerDay }} </div></ion-note>
        <ion-note *ngIf="boatBooking.status === 3" item-end><div style="background:#ddd4d4; color:#848484" class="ppoints">0</div></ion-note>          
  </ion-item>
  </div>

getting data from firebase with angularfire 2 version (I know all code is old but can not update at this moment)

I have timestamp of boatBooking:

boatBooking.timestamp and want to oreder array width custom pipe or width somethins, searched in google but not found any pipe like this.

so my question is: how to order array width pipe using boatBooking.timestamp? (timestamp is in milisecondss)

here is array code

      this.boatService.getUserBookings(this.member['$key']).subscribe(boatBookings => {

    this.boatBookings = [];
    boatBookings.forEach(boatBooking => {
      this.boat = this.boatService.getBoat(boatBooking.boatId);
      this.boatService.getBoat(boatBooking.boatId).first().subscribe(boat => {
        this.boatBookings.unshift(Object.assign(boatBooking, { boat }));
      });
    });

  });
Gocha Gochitashvili
  • 13
  • 5
  • Hi, I'm not sure I would use a pipe. Rather I would use a programmatic way to order the array in Javascript before I pass it on to the UI. If you have a lot of array manipulation to make, you should maybe consider using frameworks like lodash. – avi.elkharrat Jun 29 '18 at 10:57
  • no I have no many array to manipulate only I want to order by date (timestamp) – Gocha Gochitashvili Jun 29 '18 at 11:02

2 Answers2

3

Angular documentation strongly advises against using pipes as sorting devices.

Filtering and especially sorting are expensive operations. The user experience can degrade severely for even moderate-sized lists when Angular calls these pipe methods many times per second. filter and orderBy have often been abused in AngularJS apps, leading to complaints that Angular itself is slow. That charge is fair in the indirect sense that AngularJS prepared this performance trap by offering filter and orderBy in the first place.

...

The Angular team and many experienced Angular developers strongly recommend moving filtering and sorting logic into the component itself. The component can expose a filteredHeroes or sortedHeroes property and take control over when and how often to execute the supporting logic. Any capabilities that you would have put in a pipe and shared across the app can be written in a filtering/sorting service and injected into the component.

Pipes rather are used to process elements of arrays one by one. You may use pipes to UPPER CASE or lower case, or apply any kind of transformation on elements of an array.

As recommended in Angular doc, I would rather go for a programmatic approach and move the sorting in the component, using Javascripts ordering functionnality.

For a full discussion, please read this stack post which seems to be quite detailed.

The short answer would be:

boatBookings.sort()
boatBookings.sort(function(a,b){
  return new Date(b.date).getDate() - new Date(a.date).getDate();
});

And for those of you in ES 6, it would look like this:

boatBookings.sort()
boatBookings.sort((a,b) => new Date(b.date).getDate() - new Date(a.date).getDate())

Once the array is sorted, you may pass it to the HTML.

Community
  • 1
  • 1
avi.elkharrat
  • 4,285
  • 2
  • 35
  • 40
2

Create your pipe which transforms array using Vanilla sort function. 

import { Pipe } from "angular2/core";

@Pipe({
  name: "sort"
})
export class TsSortPipe {
  transform(array: Array<any>, args: string): Array<any> {
    array.sort((a: any, b: any) => {
      if (a.timestamp < b.timestamp) {
        return -1;
      } else if (a.timestamp > b.timestamp) {
        return 1;
      } else {
        return 0;
      }
    });
    return array;
  }
}

Edit:

use it in html as below

<div *ngFor="let boatBooking of boatBookings | sort" style="padding: 0px; margin:0px;">

Santhosh S
  • 748
  • 5
  • 17