Problem with sorting html elements based on value

Hi All, I have this problem with my code, first the sample:

.then( users => {
        contributorsArr.forEach( function( obj1 ) {
            users.forEach( function( obj ) {
                if ( obj1.id === obj.id ) {
                    Object.assign( obj, obj1 );
                }
            });
            return users;
        });
        usersArr.push(users);


        $.each( users, function ( index, user ) {

            $('#users').append(`
                    <div  class="panel panel-default userPanel">
                      <div class="panel-heading">
                        <h3 class="panel-title">${user.name ? user.name : user.login}</h3>
                      </div>
                      <div class="panel-body">
                        <div class="row">
                            <div class="col-md-3 ">
                                <img class="thumbnail avatar" src="${user.avatar_url}" alt="avatar">
                                <a target="_blank" class="btn btn-primary btn-block" href="${user.html_url}">View Profile on GitHub</a>
                            </div>
                            
                            <div class="col-md-9">
                                <span class="label label-default">Public Repos:<span class="repos"> ${user.public_repos}</span> </span>
                                <span class="label label-primary">Public Gists:<span class="gists"> ${user.public_gists}</span></span>
                                <span class="label label-success">Contributions:<span class="contributions"> ${user.contributions}</span></span>
                                <span class="label label-info">Followers:<span class="followers"> ${user.followers}</span></span>
                            </div>
                        </div>
                      </div>
                    </div>          
                            `);

        });

    });
    function sortByGists(x,y){
        let a = $(x).find('div.col-md-9 span span.gists').text();
        let b = $(y).find('div.col-md-9 span span.gists').text();
        return  parseInt(b) - parseInt(a);
    }
    function sortByRepos(x,y){
        let a = $(x).find('div.col-md-9 span span.repos').text();
        let b = $(y).find('div.col-md-9 span span.repos').text();
        return  parseInt(b) - parseInt(a);
    }
    function sortByContributions(x,y){
        let a = $(x).find('div.col-md-9 span span.contributions').text();
        let b = $(y).find('div.col-md-9 span span.contributions').text();
        return  parseInt(b) - parseInt(a);
    }
    function sortByFollowers(x,y){
        let a = $(x).find('div.col-md-9 span span.followers').text();
        let b = $(y).find('div.col-md-9 span span.followers').text();
        return  parseInt(b) - parseInt(a);
    }

    function reorderEl(el){
        let container = $('#users');
        container.html('');
        el.each(function(){
            $(this).appendTo(container);
        });
    }
    $('#gists').click(function(){
        reorderEl($('.userPanel').sort(sortByGists));
    });
    $('#repos').click(function(){
        reorderEl($('.userPanel').sort(sortByRepos));
    });
    $('#contributions').click(function(){
        reorderEl($('.userPanel').sort(sortByContributions));
    });
    $('#followers').click(function(){
        reorderEl($('.userPanel').sort(sortByFollowers));
    });

Problem is that when I click on userPanel its giving me correct value, but when I sort , its not sorting just rearranging but in strange order

Hello there!

If Iā€™m not mistaken your compare functions sortByGists and sortByRepos are returning true or false instead of a number. Changing the less than operator (<) to a minus sign (āˆ’) will likely fix your code assuming that numbers are being compared here.

Please consult this MDN reference for more detail! I hope that helps!

1 Like

Man it helped a lot Iv edited my post for future generations now it works. THANK you @honmanyau !!!

1 Like