Angular Custom Order Pipe sorting array correctly

Question

I have a custom pipe that orders an array of objects by a prop that is of type number.

Template where pipe is being used

<div *ngFor="let product of products | orderBy:'price'">

OrderByPipe

export class OrderByPipe  implements PipeTransform {
transform(array: any[], field: string): any[] {
array.sort((a: any, b: any) => {
  if (a[field] < b[field]) {
    return -1;
  } else if (a[field] > b[field]) {
    return 1;
  } else {
    return 0;
  }
});
return array;
}
}

The pipe seems to work for smaller arrays and when I use forEach to loop through each item. However when I console the array at the end and when it is returned in the template, the array is still out of order.

I am not entirely sure what might be causing this, thanks.

Pipe creates a new array by ordering your existing array, after displaying ordered array it doesn't exist anymore. If you want to have the array ordered, create a service which orders an array. — Dusan Radovanovic
– Dusan Radovanovic, Commented Nov 20, 2018 at 8:28

TylerH · Accepted Answer · 2024-05-27 16:45:56Z

2

Maybe you dont need a pipe at all and you need a service ,in your component

originalProducts;
orderedProducts;

ngOnInit() {
    this.getProducts();
}

getProducts() {
  this.productsService.getProducts()
    .subscribe((data) => {
    this.originalProducts = data;
    this.sortBy('price');  
  });
}

sortBy(field: string) {
    
        this.originalProducts.sort((a: any, b: any) => {
            if (a[field] < b[field]) {
                return -1;
            } else if (a[field] > b[field]) {
                return 1;
            } else {
                return 0;
            }
        });
        this.orderedProducts = this.originalProducts;
}

In your template

<div *ngFor="let product of orderedProducts">

And if your list is too long then use pagination.

If still you have trouble, use lodash.

edited May 27, 2024 at 16:45

TylerH

21.3k84 gold badges84 silver badges121 bronze badges

answered Nov 19, 2018 at 23:27

freepowder

4172 silver badges6 bronze badges

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

1 Comment

Shrikant Dande Over a year ago

but this doesn't sort string having numbers correctly.Can you suggest solution for that.

sofend · Accepted Answer · 2018-11-19 23:23:47Z

-1

What are the contents of the arrays? IF they are objects (which seems likely), then you will need to implement a comparator - a function that can compare two instances of those objects. The less-than (<) and greater-than (>) operators may not be doing what you expect or desire.

answered Nov 19, 2018 at 23:23

sofend

6671 gold badge8 silver badges17 bronze badges

1 Comment

user7659932 Over a year ago

They are objects but the fields of those objects is what is being compared, in this case prices e.g 42, 35 etc.

Collectives™ on Stack Overflow

Angular Custom Order Pipe sorting array correctly

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related