Angular pipe sorting

Question

According to this question -> Ascending and Descending Sort in Angular 4

I've made the same pipe, but it can't sort numbers naturally. I mean 2 is > then 11.

How can this pipe be modified to sort both string and numbers?

@Pipe({
    name: 'orderBy'
})

export class OrderByPipe implements PipeTransform {

    transform(records: Array<any>, args?: any): any {
        if (records && records.length > 0) {
            return records.sort(function (a, b) {                 
                if (a[args.property] < b[args.property]) {
                    return -1 * args.direction;
                } else if (a[args.property] > b[args.property]) {
                    return 1 * args.direction;
                } else {
                    return 0;
                }
            });

        }
    }
}

Can you give examples, what your input and args looks like and what output you expect? — Hinrich
– Hinrich, Commented Jun 21, 2018 at 13:05
Hi, actually its exactly same as from link. Inputs are values from html table column. — DKowal
– DKowal, Commented Jun 21, 2018 at 13:12

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

This is my solution for ordering in Angular with pipe.

+Extra feature: Ascending and Descending with the third parameter.

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

@Pipe({
  name: 'orderBy'
})
export class OrderByPipe implements PipeTransform {

  transform(value: any[], key: string, dir: number = 1): any {
    if (!value || !key) {
      return value;
    }

    value.sort( (a, b) => {
      return ('' + a[key]).localeCompare( ('' + b[key]) ) * dir;
    });

    return value;
  }

}

I always cast values to a string, because the comparing is easiest.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Dec 7, 2019 at 14:44

József Cserkó

2992 silver badges9 bronze badges

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

Comments

Heehaaw · Accepted Answer · 2018-06-21 14:18:49Z

That's because you are sorting the values as strings - lexicographically. The input for your pipe seems to be of type Array<{ [propertyName: string]: [value: string] }>.

Either make sure that the input property values are numbers or convert the values to number before comparing.

In case you need to sort based on the type of the data that came to your pipe, you can use something like this:

@Pipe({
  name: 'orderBy'
})
export class OrderByPipe implements PipeTransform {

  transform(records: Array<any>, args?: any): any {
    if (records && records.length > 0) {
      return records.sort(
        (a, b) => args.direction * (
          typeof a[args.property] === 'number'
            ? (a[args.property] - b[args.property])
            : a[args.property] > b[args.property] ? 1 : -1)
      );
    }
  }
}

Hope this helps a little :-)

Collectives™ on Stack Overflow

Angular pipe sorting

2 Answers 2

This is my solution for ordering in Angular with pipe.

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

This is my solution for ordering in Angular with pipe.

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related