Problem with sorting crypto currency prices (vue.js)

Question

I have a problem with the sort() method, and i cant figure it out.

So basically I have a table with crypto currencies from an api, and it can sort per column. everything works fine (Rank, Name, MarketCap, etc) except the price of the coin. This just doesn't sort correctly. for example the price of BTC always ends up somewhere in the middle. The price from the api is a String.

Photo of table with cryptos

This is the method I use for sorting.

 sortBy (prop) {
  if (this.sorter === 'inc') {
    this.cryptos.sort((a, b) => a[prop] > b[prop] ? 1 : -1)
    this.sorter = 'dec'
  } else {
    this.cryptos.sort((a, b) => a[prop] > b[prop] ? -1 : 1)
    this.sorter = 'inc'
  }
},

And this is the way I call the method

 <tr>
    <th class="table-header table-link" v-on:click="sortBy('rank')">Rank</th>
    <th class="table-header">Icon</th>
    <th class="table-header table-link" v-on:click="sortBy('name')">Name</th>
    <th class="table-header">Symbol</th>
    <th class="table-header table-link" v-on:click="sortBy('price')">Price</th>
    <th class="table-header table-link" v-on:click="sortBy('change')">{{time}}</th>
    <th class="table-header table-link" v-on:click="sortBy('marketCap')">Market Cap</th>
 </tr>

Example of amounts that are coming through (keep in mind that they are coming through as a String):

464.2807003746
15150.0527417405
0.5010685149
0.8374992554
0.5010685149 
66.5544823869
233.8180345945
4.2255392708
10.9344985436
0.1363374574
0.16150966

I hope I gave enough info, and maybe someone can help me with this. Thank you in advance!

since they are string, are they sorted like this : 1, 15, 166, 2, 20, 3, 34 ? I believe you should use parseFloat(prop) in your sortBy function, but only for float or int values (not for name). — gui3
– gui3, Commented Nov 29, 2020 at 20:35

Zsolt Meszaros · Accepted Answer · 2020-11-29 20:47:03Z

1

.sort() sorts strings in lexicographical order (the JS engine checks the number character by character), so you need to convert these to numbers.

// It's great for sorting strings
[
  `464.2807003746`, 
  `15150.0527417405`, 
  `0.5010685149`
].sort((a, b) => a > b ? 1 : -1)
//=> [('0.5010685149', '15150.0527417405', '464.2807003746')];

// Convert strings to numbers
[
  `464.2807003746`, 
  `15150.0527417405`, 
  `0.5010685149`
].sort((a, b) => Number(a) > Number(b) ? 1 : -1)
//=> "0.5010685149", "464.2807003746", "15150.0527417405"]


// Convert strings to numbers implicitly
[
  `464.2807003746`, 
  `15150.0527417405`, 
  `0.5010685149`
].sort((a, b) => a - b)
//=> "0.5010685149", "464.2807003746", "15150.0527417405"]

You can include a conditional in your sortBy method and check if the prop is the price.

edited Nov 29, 2020 at 20:47

answered Nov 29, 2020 at 20:36

Zsolt Meszaros

23.3k19 gold badges60 silver badges70 bronze badges

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

4 Comments

Lawrence Cherone Over a year ago

..].map(Number).sort(.. might be more efficient than applying on each check

Zsolt Meszaros Over a year ago

@LawrenceCherone, ah yes, or we can convert them implicitly: .sort((a, b) => a - b)

Maurits Brouwer Over a year ago

Thanks alot! It works now! I actually already tried to change it to numbers. But I probably did something wrong.

Zsolt Meszaros Over a year ago

@MauritsBrouwer Glad to hear it works now. If you think it solved your problem, you can also accept my answer ;)

Collectives™ on Stack Overflow

Problem with sorting crypto currency prices (vue.js)

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related