¿Cómo ordenar un array en Javascript?

publicado por: Anonymous

quisiera saber como puedo ordenar a mi manera los datos de un array en Javascript. El array lo estoy haciendo porque tengo que cargar un select con los días que tiene determinado mes, por Ejemplo: Enero tiene 31 y Febrero 28… así sucesivamente, El punto es que de acuerdo al mes el array de dicho mes responde, pero el punto es que este me sale “desordenado” El array lo tiene ordenado a su manera, ya que si pongo los numeros del 1 al 20 por ejemplo, este hace esto:
1
10
11
12
13

2
20
21
22
23
3
5…etc

Como podría hacer que me muestre los números en el orden que yo quiero?

Este es el codigo html:

<div class="col-md-4">
                    <div class="form-group">
                        <label for="mes">Mes</label>
                        <select name="mes" id="mes" onchange="cargardias();"  class="form-control">
                            <option disabled selected>----</option>
                            <option value="Enero">Enero</option>
                            <option value="Febrero">Febrero</option>
                            <option value="Marzo">Marzo</option>
                            <option value="Abril">Abril</option>
                            <option value="Mayo">Mayo</option>
                            <option value="Junio">Junio</option>
                            <option value="Julio">Julio</option>
                            <option value="Agosto">Agosto</option>
                            <option value="Septiembre">Septiembre</option>
                            <option value="Octubre">Octubre</option>
                            <option value="Noviembre">Noviembre</option>
                            <option value="Diciembre">Diciembre</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label for="dia">Día</label>
                        <select name="dia" id="dia" class="form-control">
                        </select>
                    </div>
                </div>

y este mi array Javascript:

    function cargardias() {
    // Objeto de mes con dias
    var listadedias = {
      Enero:        ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31"],
      Febrero:      ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29"],
      Marzo:        ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31"],
      Abril:        ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30"],
      Mayo:         ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31"],
      Junio:        ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30"],
      Julio:        ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31"],
      Agosto:       ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31"],
      Septiembre:   ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30"],
      Octubre:      ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31"],
      Noviembre:    ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30"],
      Diciembre:    ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31"],
    }

    var mes = document.getElementById('mes')
    var dias = document.getElementById('dia')
    var mesSeleccionada = mes.value

    // Se limpian los dias
    dias.innerHTML = '<option value="">------</option>'

    if(mesSeleccionada !== ''){
      // Se seleccionan los dias y se ordenan
      mesSeleccionada = listadedias[mesSeleccionada]
      mesSeleccionada.sort()

      // Insertamos los dias
      mesSeleccionada.forEach(function(dia){
        let opcion = document.createElement('option')
        opcion.value = dia
        opcion.text = dia
        dias.add(opcion)
      });
    }

  }

Gracias por las respuestas, probaré ambas alternativas, pero me funcionó sólo agregando el 0 a los dígitos del 1 al 9. así que los ordena 01 – 02 -03…. 09 – 10 – 11…etc.

solución

Dentro de tu función cargardias tienes la variable listadedias la cual es un objeto con varios arreglos, esos arreglos representan a los meses del año, para que el método sort te ordene de menor a mayor esos días, entonces los valores deben ser de tipo number y no de tipo string y usaremos una función de comparación.

function cargardias(){

    //Solo uso un mes como ejemplo, en tu función usa los doce
    var listadedias = {
      Febrero: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28]
    };

    var mes = document.getElementById('mes'),
          dias = document.getElementById('dia'),
          mesSeleccionada = mes.value;

    // Se limpian los dias
    dias.innerHTML = '<option value="">------</option>';

    if(mesSeleccionada !== ''){
        // Se seleccionan los dias y se ordenan
        mesSeleccionada = listadedias[mesSeleccionada];
        //Pasamos como argumento una función para ordenar de menor a mayor los elementos del arreglo.
        mesSeleccionada.sort(function(a, b){
            return a - b;
        });

        // Insertamos los dias
        mesSeleccionada.forEach(function(dia){
            var opcion = document.createElement('option');
            opcion.value = dia;
            opcion.textContent = dia;
           dias.appendChild(opcion);
        });
    }
}

Si la función es omitida, entonces los valores numéricos serán convertidos a string y se ordenará de manera ascendente pero usando el orden UTF-16.

Sin embargo, si el orden que necesitas es ascendente (de menor a mayor) entonces no necesitas usar el método sort ni convertir los valores de string a number, solo basta con insertarlos.

// Insertamos los dias
mesSeleccionada.forEach(function(dia){
    var opcion = document.createElement('option');
    opcion.value = dia;
    opcion.textContent = dia;
     dias.appendChild(opcion);
 });

El método forEach comienza desde el primer elemento del arreglo, es decir que solo insertando los elementos conseguirás que se visualizen de menor a mayor en tu elemento select.

Espero te sirva…

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *