Angular using javascript to make sort Pipe

Question

I have a question when I build sort pipe in Angular2 here is my pipe code:

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

@Pipe({
  name: 'sort'
})
export class SortPipe implements PipeTransform {

  transform(value: any, propName: string): any {

    return value.sort((a,b)=> {
      return a[propName]-b[propName];
      // if(a[propName]>b[propName]) {
      //   return 1;
      // } else {
      //   return -1;
      // }
    });        
  }      
}

When I use the code in comments, the pipe works, but when I use return a [propName]-b[propName]; it is not working;

chances are, youre trying to subtract a string from a string by the looks if it — mast3rd3mon
– mast3rd3mon, Commented Jan 31, 2018 at 15:05
And have you seen this: angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe It highly recommends against building pipes that sort or filter. Do it in your component class instead. I have an example of a filter here: blogs.msmvps.com/deborahk/filtering-in-angular You could do something similar for the sort. — DeborahK
– DeborahK, Commented Jan 31, 2018 at 15:07
@DeborahK that recommendation provides no evidence. I have used such pipes in multiple production apps without issue. — Aluan Haddad
– Aluan Haddad, Commented Feb 3, 2018 at 17:28

Łukasz Szcześniak · Accepted Answer · 2018-01-31 15:15:06Z

1

For sort to work, you must return an integer (see reference). Are you sure, that subtracting your properties will always return these values?

edited Jan 31, 2018 at 15:15

answered Jan 31, 2018 at 15:08

Łukasz Szcześniak

1,44411 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mia Over a year ago

Thank you for your reply, I want to try this because I saw w3schools.com/js/tryit.asp?filename=tryjs_array_sort2

Łukasz Szcześniak Over a year ago

@Mia I edited my answer to reflect an error I have made. You can subtract numbers, but your answer also has to be a number. So you must be sure, that every object has this param (you cannot subtract undefined), and return value can be casted to number (for example 5 - null will yield 5, but 5 - 'st' will yield NaN).

Markus Benz · Accepted Answer · 2018-01-31 15:23:35Z

0

Depends on what you are sorting. If the value is a number it should work. If it's a string then a NaN is returned. Second solution is better.

answered Jan 31, 2018 at 15:23

Markus Benz

1561 silver badge10 bronze badges

Comments

Swiss · Accepted Answer · 2019-02-06 11:48:22Z

-1

This code selects the property of the list of items objects passed in by the pipe and takes into consideration null values.

Below you can see what the pipe will look like with the *ngFor:

<tr *ngFor="let item of Clients | sort: sortType: sortDirection">

Below you can see when the column header is clicked, the arrows change direction of the arrow and make the sort output ascending or descending within the sort pipe.

<th>
        <div class="d-flex flex-row hoverOver">
          <span class="text-nowrap">Quantity</span>
          <i class="fa hoverTrans align-self-center mx-1" [ngClass]="{'fa-arrows-v': column != 'created',
            'fas fa-long-arrow-up': !sortDirection,
            'fas fa-long-arrow-down': sortDirection }" (click)="sortType = 'qty'; sortDirection = !sortDirection">
          </i>

Below is the Sort Pipe:

transform(items: any, sortType: any, sortDirection: any): any {

    const direction = sortDirection ? -1 : 1;

    items.sort((a, b) => {
      if (a[sortType] < b[sortType] || (a[sortType] === null && b[sortType] !== null) || (a[sortType] === "" && b[sortType] !== null)) {
        return -1 * direction;
      } else if (a[sortType] > b[sortType] || (a[sortType] !== null && b[sortType] === null) || (a[sortType] !== null && b[sortType] === "")) {
        return 1 * direction;
      } else {
        return 0;
      }
    });

    return items;
  }

edited Feb 6, 2019 at 11:48

answered Jan 25, 2019 at 20:08

Swiss

12 bronze badges

2 Comments

FortyTwo Over a year ago

Don't use images, instead write the code in code blocks. Is more readable

Swiss Over a year ago

Thanks for the feedback I have updated my answer for readability.

Collectives™ on Stack Overflow

Angular using javascript to make sort Pipe

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related