How to sort a select option alphabetically with jquery?

Question

I have a select option to list through a each in jquery what I intend to do now and order that each by alphabetical order when listed.

Jquery

$(document).on("click", ".btn-add-agent-proximo", function(e) {
if($('#add_agent').is(':checked')){ 
  $('#modal-add-agent').modal('hide'); 

  var id_agente_pai = <?= Auth::user()->id ?>

  $.ajax({
      type: "POST",
      url: "admin/list_agent",
      headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
      data: { id_agente_pai : 'id_agente_pai'},
      dataType: 'json'
  }).done(function( data ) {
      $.each(data.parents, function( key, parents ) {
          $('#parent').append('<option value="'+parents.id+'"><span>ID('+parents.id+') </span>'+parents.username+'</option>');
      });
      $.each(data.currencies, function( key, currencies ) {
          $('#currency').append('<option value="'+currencies.id+'">'+currencies.code+'</option>');
      });
      $.each(data.funcoes, function( key, funcoes ) {
          $('#funcoes').append('<option value="'+funcoes.id+'">'+funcoes.nome+'</option>');
      });

  }).fail(function(data) {
      toastr.error('Ocorreu um erro!');
  });

  $('#modal-add-agent-modal').modal('show');

  $('#modal-add-agent-modal').on('hide.bs.modal', function () {
    $('#parent').empty();
    $('#currency').empty();
    $('#funcoes').empty();
  });

}else if($('#add_jogador').is(':checked')){ 
  $('#modal-add-agent').modal('hide'); 

    $.ajax({
      type: "POST",
      url: "admin/list_agent",
      headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
      data: { id_agente_pai : 'id_agente_pai'},
      dataType: 'json'
  }).done(function( data ) {
      $.each(data.parents, function( key, parents_jogador ) {
          $('#parent_jogador').append('<option value="'+parents_jogador.id+'"><span>ID('+parents_jogador.id+') </span>'+parents_jogador.username+'</option>');
      });

  }).fail(function(data) {
      toastr.error('Ocorreu um erro!');
  });

  $('#modal-add-jogador-modal').modal('show');

  $('#modal-add-jogador-modal').on('hide.bs.modal', function () {
    $('#parent_jogador').empty();
  });
}
});

What I intend to list and select with the id parents

Answer 1

Maybe just using sort solve your problem!

data.parents.sort(function (a, b) {

     if (a.username === b.username) return 0;

     return a.username > b.username ? 1 : -1;
})

$.each(data.parent, function () {
   // ...
});

The function sort uses how callback an anonymous function that compares the values of username. The values of array will be ordered according to returns 1, -1 or 0.

Read more here: How callback sorting functions work internally?