ReactJS array.sort doesn't work. What's wrong with my sorting statement?

Question

This question has been answered a thousand times, but for the life of me I can't get it to work. I've got an array products containing, you guessed it, products. A product basically looks like this:

product{
    product.product_name,
    product.price,
    product.amount,
    product.store_name,
    product.image_url
}

Not sure if that's the correct way to display it for React, but you get the idea. I want to display these products in a table. Now, I made a dropdown selector which needs to sort these. So, when someone selects, for example, "price" in the dropdown, the table with products needs to be ordered on price. At the moment I sort them like this:

if (order == 0){
  sortedProducts = products.sort((a, b) => b.product_name - a.product_name);
} else if (order == 1){
  sortedProducts = products.sort((a, b) => b.price - a.price);
} else if (order == 2){
  sortedProducts = products.sort((a, b) => b.amount - a.amount);
} else {
  sortedProducts = products.sort((a, b) => b.store_name - a.store_name);
}
var items = [];
for (var i = pageNo * pagination; i < sortedProducts.length; i++) {
  [... convert to table rows ...]
}

return items;

I got the code from this SO post, and found another blog using this method. However, I don't really understand it and it doesn't work either. My first try was this:

sortedProducts = products.sort(p => p.product_name);

For the product name, but sadly this didn't work either. Does someone know how I can accomplish this?

Subtraction inside *compareFunction* won't work for strings. You need `localeCompare`. Or you can use the `>` operator and return 1 and -1 conditionally. This will work for numbers and strings. — adiga, Jun 08 '21 at 17:46
Does this answer your question? [Sorting an array of objects by property values](https://stackoverflow.com/questions/979256/sorting-an-array-of-objects-by-property-values) — Heretic Monkey, Jun 08 '21 at 18:44

Piotr Żak · Accepted Answer · 2021-06-08T18:40:32.183

0

You have 2 type of sorting:

This is the simplest sorting in ascending manner:

(in Your case - try to add ? 1 : -1 - for descending - just reverse - ? -1 : 1)

const list = [
  { n1: 10, test: "b"},
  { n1: 2,  test: "a"},
  { n1: 8, test: "c"},
]

list.sort((a, b) => (a.n1 > b.n1) ? 1 : -1)
test = list.sort((a, b) => (a.test > b.test) ? 1 : -1)


console.log(list)
console.log(test)

edited Jun 08 '21 at 18:40

answered Jun 08 '21 at 17:50

Piotr Żak

2,046
5
18
30

1

Hmm it does sort now, but not on the right values. Thanks for the help, I'll need to deconstruct my code a bit further. – Jasper Wijnhoven Jun 08 '21 at 18:07
It's depends on Your - order variable - I suggest to hold in hook - correlated with UI, which property should be base for sorting mechanism – Piotr Żak Jun 08 '21 at 18:08
After a bit of experimentation, I found out that it always sorts on store type no matter which order type I select (I used debugger mode to make sure it actually got in those methods only). Do you know why? – Jasper Wijnhoven Jun 08 '21 at 18:25
I'm not sure - but it's depend Your order variable i edit question for sorting by 2 parameters in object – Piotr Żak Jun 08 '21 at 18:39

ReactJS array.sort doesn't work. What's wrong with my sorting statement?

1 Answers1