How can I sort items correctly using js

Question

I searched problems similar to this one, but those didn't solve my problem. I have a bootstrap cards showing items. And i have a filter to order this cards by liked votes, but when I trigger the js function, the sort doesnt works well (looks like it's ordering in a random way) .

html:

 <a class="like badge" onclick="vote('{% url 'like_item' pk=item.pk %}', '.liked_item_{{item.id}}', '.disliked_item_{{item.id}}', '.like_{{item.id}}', '.dislike_{{item.id}}')" href="javascript:void(0)">
        <span class="liked_item_{{item.id}} liked_votes">
          {{ item.count_likes }}
        </span>
      </a>

js:

if(this.name == 'thumbsUp'){
    var thumbsUpOrderedDivs = $divs.sort(function (a, b) {
        return $(a).find('.liked_votes').text() < $(b).find('.liked_votes').text();
    });
    $("#idea-list-group").html(thumbsUpOrderedDivs);
}

Do the curlys {{ }} indicate Angular? In which case, or for a similar framework, I would look into a sort or orderBy pipe to do the sorting. — Andy G
– Andy G, Commented Feb 7, 2019 at 13:35
Possible duplicate of Javascript : natural sort of alphanumerical strings — Heretic Monkey
– Heretic Monkey, Commented Feb 7, 2019 at 14:12

VLAZ · Accepted Answer · 2019-02-07 13:30:06Z

2

You should use String.prototype.localeCompare()

localCompare:The localeCompare() method returns a number indicating whether a reference string comes before or after or is the same as the given string in sort order

if(this.name == 'thumbsUp'){
    var thumbsUpOrderedDivs = $divs.sort(function (a, b) {
        return ($(a).find('.liked_votes').text() + '').localeCompare($(b).find('.liked_votes').text());
    });
    $("#idea-list-group").html(thumbsUpOrderedDivs);
}

edited Feb 7, 2019 at 13:30

VLAZ

29.6k9 gold badges65 silver badges88 bronze badges

answered Feb 7, 2019 at 12:59

Maheer Ali

36.5k8 gold badges53 silver badges83 bronze badges

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

4 Comments

mr.abdo Over a year ago

I got localCompare is not a function, I'm trying solve it.

VLAZ Over a year ago

It's supposed to be localeCompare. I have made an edit

Álvaro Touzón Over a year ago

take care with localCompare, in some browsers is not compatible developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

VLAZ Over a year ago

@ÁlvaroTouzón not compatible with expanded usage, the suggested here is fine.

Alen.Toma · Accepted Answer · 2019-02-07 14:08:36Z

1

try parsing the text to numbers

    var thumbsUpOrderedDivs = $(".liked_votes").sort(function (a, b) {
        return  parseInt($(a).text()) - parseInt($(b).text());
    });
    
    $(".badge").html(thumbsUpOrderedDivs);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="like badge">
        <span class="liked_item_{{item.id}} liked_votes">
         5
        </span>
          <span class="liked_item_{{item.id}} liked_votes">
         1
        </span>
        
          <span class="liked_item_{{item.id}} liked_votes">
         3
        </span>
        
          <span class="liked_item_{{item.id}} liked_votes">
         100
        </span>
      </a>

edited Feb 7, 2019 at 14:08

answered Feb 7, 2019 at 13:34

Alen.Toma

4,8782 gold badges19 silver badges37 bronze badges

1 Comment

VLAZ Over a year ago

That is still not a symmetric sorting function and would not guarantee correct sorting.

Collectives™ on Stack Overflow

How can I sort items correctly using js

2 Answers 2

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related