How to order div loop by class name in javascript

Question

I have this code:

function Userlist(users) {
var id = "#userlist";

$(id).empty();

users.forEach(function(value, key, map) {

userlistHTML += '<li><div class="userlist_pawn'+ value.pawn +'"></div><divclass="userlist_name">' + value.name + '</div></li>';

}


});

    $(id).html(userlistHTML);
}

This is a userlist from my chat app, the users have different pawns that coming with value.pawn, i made css with this classes like userlist_pawnADMIN (orange pawn image), userlist_pawnMODERATOR (white pawn image) , userlist_pawnMEMBER (blue pawn image) , ADMIN, MODERATOR and MEMBER are the values from value.pawn depending on the rank of the user, I would like to make this order that ADMIN be on the 1st place in the list, MODERATOR on the 2nd place respectively MEMBER on the 3rd place, at the moment they appear in the order of connection on chat.

HTML:

<ul id="userlist">
                </ul>

You simply need to sort the users array using the role of each user (before the iteration) - so that all the users with AFMIN are sorted to be at the start of the array and tthen all the users twith moderator and then all the users with memeber. Then the iteration of the array will naturally provide the same order. Aslo - not that you have to set userlistHTML = '' before the iteration (after the empty() - currently youare adding to a stricg that doesn't exist. and you don't even need the empty() - you are totally replacing the innerHTML at the .html() at the end) — gavgrif, Mar 13 '20 at 00:46
Does this answer your question? [Sorting object property by values](https://stackoverflow.com/questions/1069666/sorting-object-property-by-values) — Triby, Mar 13 '20 at 00:51

score 0 · Accepted Answer · answered Mar 13 '20 at 01:47

Could you try this one?

let order = ['ADMIN', 'MODERATOR', 'MEMBER'];

    order.forEach(function(orderItem) {
        users.forEach(function(value, key, map) {
            if (orderItem === value.pawn) {
                userlistHTML += '<li><div class="userlist_pawn'+ value.pawn +'"></div><divclass="userlist_name">' + value.name + '</div></li>';
            } 

        })
    })

gavgrif · Answer 2 · 2020-03-13T02:18:58.667

This is what I was referring to - get the user list / sort it by role / iterate over to get the string / replace the innerHTML with the string.

Note that I have used an object literal to determine the relative ordering of the user roles - since the desired outcome is not directly alphabbetical. This is used to determine the sort order of the users by referencing the value of the related user role (rather than simply alhabetically ordering the array).

Also not the one liner used for the sort - this could be split out into a seperate named function it it was needed by anothter function (and the sor order ould also be modified so that it shows differently for different users.

I also used the classes on the li's - and used that to give spacing between the groupings.

const users = [
 {name: 'Arthur' , role: "Member"},
 {name: 'Susan' , role: "Moderator"},
 {name: 'Bob' , role: "Admin"},
 {name: 'Sylvia' , role: "Member"},
 {name: 'Gavin' , role: "Moderator"},
 {name: 'Stuart' , role: "Admin"}   
]

const roleOrder = {
  Admin: 1,
  Moderator: 2,
  Member: 3
};

function Userlist(users) {
  const id = "#userlist";
  let userlistHTML ='';
  const sortedUsers =  users.sort(function(a, b){ return roleOrder[a.role] == roleOrder[b.role] ? 0 : +(roleOrder[a.role] > roleOrder[b.role]) || -1;});
  
  sortedUsers.forEach(function(user) {
   userlistHTML += '<li class="userlist_pawn'+ user.role +'"><span class="userlist_name">' + user.name + ' (' + user.role + ')</span></li>';
  });
  $(id).html(userlistHTML);
}

Userlist(users);

// gives the list in the order of admin > moderator > member
// Bob (admin)
// Stuart (admin)

// Susan (moderator)
// Gavin (moderator)

// Arthur (member)
// Sylvia (member)

ul {
  list-style: none;
  padding-left: 0;
  }

.userlist_pawnAdmin {
  color: red;
}

.userlist_pawnModerator {
  color: blue;
}

.userlist_pawnMember {
  color: green;
}

.userlist_pawnAdmin + .userlist_pawnModerator,
.userlist_pawnModerator + .userlist_pawnMember {
  margin-top: 16px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id = "userlist"></ul>

How to order div loop by class name in javascript

2 Answers2