Order array elements in $.each loop

Question

I have this code. :

$.getJson('api/players_.json', function(players){
// ... some logic code stuff to generate a custom parent object
// with 20 teams of 11 players
$.each(chosenSetupPerTeam, function(i){
     console.log(chosenSetupPerTeam[i]);
     $.each(chosenSetupPerTeam[i], function(n){

       console.log(chosenSetupPerTeam[i][n].player_surname +' '+chosenSetupPerTeam[i][n].role_name +' '+chosenSetupPerTeam[i][n].team_name);

     });
});

I'm implementing an array iteration inside a $.getJSON call to append some elements to the DOM.

It's working fine, but I need to order the results of the iteration with a criterio. Here is the console log, I want to sort the players by role example: Portiere, Difensore, Centrocampista, Attaccante. I also want to ask if for a nested object example: array(20) that contains array(11), is a better method to iterate over?

Extension Started!
team.min.js:1 Array(11)
team.min.js:1 Mazzitelli Centrocampista Sassuolo
team.min.js:1 Gravillon Difensore Sassuolo
team.min.js:1 Pegolo Portiere Sassuolo
team.min.js:1 Traoré Centrocampista Sassuolo
team.min.js:1 Matri Attaccante Sassuolo
team.min.js:1 Babacar Attaccante Sassuolo
team.min.js:1 Muldur Difensore Sassuolo
team.min.js:1 Goldaniga Difensore Sassuolo
team.min.js:1 Peluso Difensore Sassuolo
team.min.js:1 Magnanelli Centrocampista Sassuolo
team.min.js:1 Obiang Centrocampista Sassuolo

Can anyone guide me?

Dacre Denny · Accepted Answer · 2019-09-04 05:43:32Z

1

You could use the Array#sort method here to order each member of any given team by the role_name field that each team member has, via this comparator callback:

function (memberA, memberB) {
    /* If memberA role name alphabetically before memberB role_name
    then order memberA before memberB */
    return memberA.role_name < memberB.role_name ? -1 : 1;
}

This can be incorporated into your code as follows:

/* Use of forEach here is optional */
chosenSetupPerTeam.forEach(function(team) {

  /* Call sort() on the team array, and use comparator above to sort
     team members based based on the role name */
  const teamOrderedByRole = team.sort(function (memberA, memberB) {
      return memberA.role_name < memberB.role_name ? -1 : 1;
  });

  console.log(teamOrderedByRole);
});

answered Sep 4, 2019 at 5:43

Dacre Denny

30.4k5 gold badges53 silver badges66 bronze badges

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

3 Comments

jihuuNI Over a year ago

Ok, thanks. Another things, to avoid to create many divs for each player, is it possible to create a single wrapper div using the teams name as div id and that will group the sorted players?

Dacre Denny Over a year ago

You're welcome :) Yes that is possible - just to confirm, you want a div for each team that contains all the team member information, sorted by role_name ?

jihuuNI Over a year ago

Yes, I want to assign a parent div for each team: example <div class="team" id="team_'+chosenSetupTeam[i][n].id+'"> ... here all the players of this team are listed</div> .I don't know how to append it correctly because .append()seems not to be the best approach

Collectives™ on Stack Overflow

Order array elements in $.each loop

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related