Angular 4 OrderBy Pipe not sorting if name ends with number

Question

I want to use pipe to sort names ending with numbers.

I have used custom pipe and getting results as expected

$Apple fruit -symbol
1Apple fruit -numbers
Apple fruit -alphabetically

But it is not sorting if name ends with number.

Result now:

Apple fruit3
Apple fruit01
Apple fruit5
Apple fruit02

JSON

[
{"name": "Apple fruit3"},
{"name": "$Apple fruit"},
{"name": "Apple fruit"},
{"name": "Apple fruit01"},
{"name": "Apple fruit5"},
{"name": "Apple fruit02"},
]

HTML

<div *ngFor='let list of names | appOrderBy : "name" '>
<div>{{list.name}}</div>
</div>

OrderBy Custom Pipe

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
     name: 'appOrderBy'
})
export class OrderBy implements PipeTransform {
transform(array: Array<string>, args: string): Array<string>{
array.sort((a: any, b: any) => {
  if (a[args] < b[args]) {
    return -1;
  } else if (a[args] > b[args]) {
    return 1;
  } else {
    return 0;
  }
});
return array;
}
}

Thanks @AshishRanjan . This method worked too but i will keep Adrain Brand changes for now which looks more simple and meaningful to me — Jesse W
– Jesse W, Commented Oct 19, 2018 at 14:46
I had meant that your code was already working for me... removing the else part will not cause any visible change, even if you will add the else it will still be the same.. — Ashish Ranjan
– Ashish Ranjan, Commented Oct 19, 2018 at 15:02
Consider avoid using an order by pipe and instead filtering in the component only as needed. No FilterPipe or OrderByPipe — Alexander Staroselsky
– Alexander Staroselsky, Commented Oct 19, 2018 at 21:50

Adrian Brand · Accepted Answer · 2018-10-19 21:42:10Z

2

Use an Intl.Collator as your compare function for natural number sorting.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Collator

const array = [
  {name: "Apple fruit3"},
  {name: "$Apple fruit"},
  {name: "Apple fruit"},
  {name: "Apple fruit01"},
  {name: "Apple fruit5"},
  {name: "Apple fruit02"},
];

args= 'name';

var collator = new Intl.Collator(undefined, {numeric: true, sensitivity: 'base'});

array.sort((a, b) => collator.compare(a[args], b[args]));

console.log(array);

I based this answer off searching for a natural number sort Google search which returned this post.

Javascript : natural sort of alphanumerical strings

edited Oct 19, 2018 at 21:42

answered Oct 19, 2018 at 5:15

Adrian Brand

21.8k4 gold badges46 silver badges67 bronze badges

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

Collectives™ on Stack Overflow

Angular 4 OrderBy Pipe not sorting if name ends with number

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related