4

Montei um select através do JSON abaixo, o único problema é que ele segue a ordem da chave, como organizá-lo alfabeticamente?

{
    "12": "Acre",
    "27": "Alagoas",
    "16": "Amapá",
    "13": "Amazonas",
    "29": "Bahia",
    "23": "Ceará",
    "53": "Distrito Federal",
    "32": "Espírito Santo",
    "52": "Goiás",
    "21": "Maranhão",
    "51": "Mato Grosso",
    "50": "Mato Grosso do Sul",
    "31": "Minas Gerais",
    "15": "Pará",
    "25": "Paraíba",
    "41": "Paraná",
    "26": "Pernambuco",
    "22": "Piauí",
    "33": "Rio de Janeiro",
    "24": "Rio Grande do Norte",
    "43": "Rio Grande do Sul",
    "11": "Rondônia",
    "14": "Roraima",
    "42": "Santa Catarina",
    "35": "São Paulo",
    "28": "Sergipe",
    "17": "Tocantins"
}

$(document).ready(function() {
  $.getJSON("/estados.json", function(estados) {
    $.each(estados, function(codigo, nome) {
      $('select#estado').append($('<option>').text(nome).attr('value', codigo));
    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="estado" name="estado" class="form-control input">
  <option value="">Selecione o Estado</option>
</select>

3
  • Mas sua lista já está em ordem alfabética, mesmo assim, se tiver acesso faça isso no backend. Commented 11/07/2016 às 18:12
  • Sim, a lista está em ordem alfabética mas ao montar o select ele automáticamente ordena pela key e não pelo value. Commented 11/07/2016 às 18:50
  • As alternativas apresentadas são boas, mas isto não funciona. Do ponto de vista da UX, você terá muito mais resultado para sua experiência, se colocar um campo digitável, que pode sugerir opções com base nos primeiros caracteres inseridos. Nesse caso a ordem seria irrelevante, porque ele vai precisar inserir pelo menos A para ver Acre Alagoas, Amapá. Você vai entender isso melhor se pensar numa forma mais ampla onde você tem um resultado com todas cidades de um estado por exemplo, e você pode ordenar por ABC .. para a pessoa poder achar uma opção, e não objetivamente, para ela achar a que ela Commented 22/10/2018 às 4:51

4 Respostas 4

7

Primeiro gostaria de sugerir uma edição do seu Json para que o retorno fique legível, alguém pode mexer no código que um dia não seja você! Então faria algo no sentido:

var UFs =    
[ 
    {Id: 12, UF: "Acre"},
    {Id: 27, UF: "Alagoas"},
    {Id: 16, UF: "Amapá"},
    {Id: 13, UF: "Amazonas"},
    .
    .
    .
];

Após isso Faria uma função de ordenação muito simples:

function OrdenarPorNome()
{
      UFs.sort(function (a, b) { return a.UF > b.UF ? 1 : -1; });
} // Como  o amigo acima já observou!

function OrdenarPorID()
{
      UFs.sort(function (a, b) { return a.Id > b.Id ? 1 : -1; });
} 

Inclusive caso quera ordenar pelo Id também!

Para executar a ordenação basta chamar a função:

OrdenarPorNome();
0
4

infelizmente não é possível ordenar as chaves de um JSON, porém você pode mapear o seu objeto para um array de objetos, então poderá usar a função sort.

var data = {
    "12": "Acre",
    "27": "Alagoas",
    "16": "Amapá",
    "13": "Amazonas",
    "29": "Bahia",
    "23": "Ceará",
    "53": "Distrito Federal",
    "32": "Espírito Santo",
    "52": "Goiás",
    "21": "Maranhão",
    "51": "Mato Grosso",
    "50": "Mato Grosso do Sul",
    "31": "Minas Gerais",
    "15": "Pará",
    "25": "Paraíba",
    "41": "Paraná",
    "26": "Pernambuco",
    "22": "Piauí",
    "33": "Rio de Janeiro",
    "24": "Rio Grande do Norte",
    "43": "Rio Grande do Sul",
    "11": "Rondônia",
    "14": "Roraima",
    "42": "Santa Catarina",
    "35": "São Paulo",
    "28": "Sergipe",
    "17": "Tocantins"
};

var _estado = document.getElementById("estado");
var estados = Object.keys(data).map(function(key) {
  return { codigo: key, nome: data[key] };
});
estados.sort(function (estadoA, estadoB) {
  return estadoA.nome > estadoB.nome ? 1 : -1;
});
estados.forEach(function(estado) {
  var option = document.createElement("option");
  option.value = estado.codigo;
  option.textContent = estado.nome;
  _estado.appendChild(option);
})
<select id="estado" name="estado" class="form-control input">
</select>

EDIT

Graças ao @MagicHat, vi que poderia usar o Object.keys para simplificar a minha resposta.

4

@Marcelo uma alternativa é ordenar com uma função js. Ficaria mais ou menos assim:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="estado" name="estado" class="form-control input">
  <option value="">Selecione o Estado</option>
</select>

        $(document).ready(function() {
            function orderSelect(){
                var options = $('select.whatever option');
                var arr = options.map(function(_, o) {
                    return {
                        t: $(o).text(),
                        v: o.value
                    };
                }).get();
                arr.sort(function(o1, o2) {
                    return o1.t > o2.t ? 1 : o1.t < o2.t ? -1 : 0;
                });
                options.each(function(i, o) {
                    console.log(i);
                    o.value = arr[i].v;
                    $(o).text(arr[i].t);
                });
            }

  $.getJSON("/estados.json", function(estados) {
    $.each(estados, function(codigo, nome) {
      $('select#estado').append($('<option>').text(nome).attr('value', codigo));
    });
    orderSelect();
  });
});
3

@Marcelo de Andrade tô um pouco atrasado, mas pode fazer assim também. Desta forma, ele reorganizará as chaves e eventualmente se for gravar do BD, ele irá gravar os números das keys relativos aos respectivos estados.

Veja funcionando : FIDDLE

<body>
<select id="estado" name="estado" class="form-control input">

</select>
<script>
html="";    
var data = 
{
"12": "Acre",
"27": "Alagoas",
"16": "Amapá",
"13": "Amazonas",
"29": "Bahia",
"23": "Ceará",
"53": "Distrito Federal",
"32": "Espírito Santo",
"52": "Goiás",
"21": "Maranhão",
"51": "Mato Grosso",
"50": "Mato Grosso do Sul",
"31": "Minas Gerais",
"15": "Pará",
"25": "Paraíba",
"41": "Paraná",
"26": "Pernambuco",
"22": "Piauí",
"33": "Rio de Janeiro",
"24": "Rio Grande do Norte",
"43": "Rio Grande do Sul",
"11": "Rondônia",
"14": "Roraima",
"42": "Santa Catarina",
"35": "São Paulo",
"28": "Sergipe",
"17": "Tocantins"
 };

 var arr = Object.keys(data).map(function(k) { return data[k] });
 arr.sort();
 for(var key in arr) {
 html += "<option value=" + key + ">" +arr[key] + "</option>";}

 document.getElementById("estado").innerHTML = html;

 </script>
 </body>
1
  • 1
    Por favor evitem longas discussões nos comentários; a conversa de vocês foi movida para o chat
    – bfavaretto
    Commented 12/07/2016 às 15:27

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .