Angular Custom Order Pipe sorting array correctly
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.
javascript angular typescript asynchronous
asked Nov 19 '18 at 23:09
user7659932user7659932
375
add a comment |
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.
javascript angular typescript asynchronous
asked Nov 19 '18 at 23:09
user7659932user7659932
375
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
Nov 20 '18 at 8:28
add a comment |
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.
javascript angular typescript asynchronous
asked Nov 19 '18 at 23:09
user7659932user7659932
375
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.
javascript angular typescript asynchronous
javascript angular typescript asynchronous
asked Nov 19 '18 at 23:09
user7659932user7659932
375
asked Nov 19 '18 at 23:09
user7659932user7659932
375
asked Nov 19 '18 at 23:09
user7659932user7659932
375
asked Nov 19 '18 at 23:09
user7659932user7659932
375
asked Nov 19 '18 at 23:09
user7659932user7659932
375
375
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
Nov 20 '18 at 8:28
add a comment |
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
Nov 20 '18 at 8:28
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
Nov 20 '18 at 8:28
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
Nov 20 '18 at 8:28
add a comment |
2 Answers
2
active
oldest
votes
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.
Good luck!
answered Nov 19 '18 at 23:27
freepowderfreepowder
2896
Thanks, I found my issue!
– user7659932
Nov 20 '18 at 18:43
add a comment |
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 '18 at 23:23
sofendsofend
343415
They are objects but the fields of those objects is what is being compared, in this case prices e.g 42, 35 etc.
– user7659932
Nov 19 '18 at 23:27
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53383949%2fangular-custom-order-pipe-sorting-array-correctly%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
Good luck!
answered Nov 19 '18 at 23:27
freepowderfreepowder
2896
Thanks, I found my issue!
– user7659932
Nov 20 '18 at 18:43
add a comment |
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.
Good luck!
answered Nov 19 '18 at 23:27
freepowderfreepowder
2896
Thanks, I found my issue!
– user7659932
Nov 20 '18 at 18:43
add a comment |
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.
Good luck!
answered Nov 19 '18 at 23:27
freepowderfreepowder
2896
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.
Good luck!
answered Nov 19 '18 at 23:27
freepowderfreepowder
2896
edited Nov 20 '18 at 8:05
answered Nov 19 '18 at 23:27
freepowderfreepowder
2896
answered Nov 19 '18 at 23:27
freepowderfreepowder
2896
answered Nov 19 '18 at 23:27
freepowderfreepowder
2896
2896
Thanks, I found my issue!
– user7659932
Nov 20 '18 at 18:43
add a comment |
Thanks, I found my issue!
– user7659932
Nov 20 '18 at 18:43
Thanks, I found my issue!
– user7659932
Nov 20 '18 at 18:43
Thanks, I found my issue!
– user7659932
Nov 20 '18 at 18:43
add a comment |
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 '18 at 23:23
sofendsofend
343415
They are objects but the fields of those objects is what is being compared, in this case prices e.g 42, 35 etc.
– user7659932
Nov 19 '18 at 23:27
add a comment |
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 '18 at 23:23
sofendsofend
343415
They are objects but the fields of those objects is what is being compared, in this case prices e.g 42, 35 etc.
– user7659932
Nov 19 '18 at 23:27
add a comment |
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 '18 at 23:23
sofendsofend
343415
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 '18 at 23:23
sofendsofend
343415
answered Nov 19 '18 at 23:23
sofendsofend
343415
answered Nov 19 '18 at 23:23
sofendsofend
343415
answered Nov 19 '18 at 23:23
sofendsofend
343415
343415
They are objects but the fields of those objects is what is being compared, in this case prices e.g 42, 35 etc.
– user7659932
Nov 19 '18 at 23:27
add a comment |
They are objects but the fields of those objects is what is being compared, in this case prices e.g 42, 35 etc.
– user7659932
Nov 19 '18 at 23:27
They are objects but the fields of those objects is what is being compared, in this case prices e.g 42, 35 etc.
– user7659932
Nov 19 '18 at 23:27
They are objects but the fields of those objects is what is being compared, in this case prices e.g 42, 35 etc.
– user7659932
Nov 19 '18 at 23:27
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53383949%2fangular-custom-order-pipe-sorting-array-correctly%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
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
Nov 20 '18 at 8:28