0

Estoy creando mi propio sitio web en C#, y estoy tratando de ordenar el listado de nombres de algunas personas que obtengo desde la base de datos en orden alfabético (A - Z).

Dejo un jsfiddle con un ejemplo de lo que llevo realizado y la función hecha en javacript con la cual cargo el listado de las personas en la lista desplegable

function loadResponsable() {
    const url = document.getElementById("responsables").value;
    document.getElementById("AssignDiv").style.display = "block";

    $.ajax({
        url: url,
        type: "POST",
        dataType: "json",
        success: function(data) {
            const responsables = document.getElementById("ticketRespInput");

            for (let idx in data) {
                if (data.hasOwnProperty(idx)) {
                    const option = document.createElement("option");
                    option.innerHTML = data[idx];
                    option.value = idx;
                    responsables.options.add(option);
                }
            }
        }
    });
};
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="form-group" name="asignar" id="AssignDiv">
                                    <label class="required-field" name="asignar" id="lblAssignDiv" for="ticketRespInput">Asignado a:</label>
                                    <select onchange="validate(this)" id="ticketRespInput" name="assigned" class="form-control form-control-user validateable" style="width: 100%; padding: 0.375rem 0.75rem; height: 50px;" tabindex="-1" aria-hidden="true">
                                        <option value="" disabled selected>Sin asignar</option>
                                    </select>                                  
                                </div>

4
  • Por favor, añade el código a la pregunta: si ese fiddle se elimina la pregunta dejará de tener sentido. el 13 nov. 2019 a las 17:50
  • @PabloLozano revisa nuevamente la pregunta ya agregue mi código
    – John Doe
    el 13 nov. 2019 a las 17:52
  • y donde es que esta la funcion que ordena?
    – gbianchi
    el 13 nov. 2019 a las 20:01
  • @gbianchi Esa es la función que necesito la que me ordene en orden alfabético de A-Z
    – John Doe
    el 13 nov. 2019 a las 20:02

1 respuesta 1

1

Prueba con el siguiente código

function loadResponsable() {
    const url = document.getElementById("responsables").value;
    document.getElementById("AssignDiv").style.display = "block";

    $.ajax({
        url: url,
        type: "POST",
        dataType: "json",
        success: function(data) {
            const responsables = document.getElementById("ticketRespInput");

            const arrData = Object.keys(data).map(item => {
                return {
                    key: item,
                    value: data[item]
                }
            });

            const arrDataSorted = arrData.sort((a,b) => (a.value > b.value) ? 1 : ((b.value > a.value) ? -1 : 0));

            for (let idx in arrDataSorted) {
                const option = document.createElement("option");
                option.innerHTML = arrDataSorted[idx].value;
                option.value = arrDataSorted[idx].key;
                responsables.options.add(option);
            }
        }
    });
};

Teniendo en cuenta que la respuesta que recibes desde la API es un objeto que contiene todo el diccionario (llave, valor) y no es un arreglo como tal, toca hacer un mapeo de esa respuesta para transformarlo a un array para después hacer uso del método sort() que incluyen los arreglos en javascript.

7
  • Probando tu posible solucion me presenta el siguiente error Uncaught TypeError: data.sort is not a function
    – John Doe
    el 13 nov. 2019 a las 18:05
  • La respuesta de la llamada ajax es un arreglo? en el código que hice asumí que es un arreglo dado que lo recorres. Sin embargo, el error que indicas me sugiere que no es un arreglo. En caso que si sea un arreglo prueba agregando Array.from(data).sort... el 13 nov. 2019 a las 18:09
  • Puedes editar tu respuesta y dejarme el código detallado
    – John Doe
    el 13 nov. 2019 a las 18:11
  • Actualizada la respuesta el 13 nov. 2019 a las 18:15
  • Probando con Array.from(data).sort ya no me muestra ningún dato en la lista desplegable
    – John Doe
    el 13 nov. 2019 a las 18:16

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.