Aprende a como organizar alfabéticamente un Array de objetos con una clave especifica en orden ascendiente o descendiente.

Cómo ordenar alfabéticamente una matriz de objetos por clave en JavaScript

Ordenar una matriz de objetos en JavaScript puede ser una pesadilla si no conoces la lógica correcta para hacerlo. La forma preferida de ordenar una matriz es que uses tu método de organización, un método que ordena los elementos de una matriz en su lugar. El orden de clasificación predeterminado es según la cadena de puntos de código Unicode.

En este artículo, compartiremos para ti un método muy simple, funcional y optimizado para ordenar una matriz de objetos por alguna clave en orden ascendente o descendente usando JavaScript simple (sin marcos adicionales).

1. Crea/expone algunos datos para ordenar

Como primer paso, para ordenar una matriz de objetos por alguna clave, necesitarás una estructura válida en tu matriz, obviamente una matriz de objetos solo puede tener objetos con al menos una clave (la que desea ordenar). En este ejemplo, tendremos la variable MyData que tiene la siguiente estructura:

var MyData = [
    { id : 1, name: "Angel Miguel",   city: "Nex Mexico" },
    { id : 2, name: "Michael Rogers", city: "Bogotá"     },
    { id : 3, name: "Steve Rogers",   city: "New York"   },
    { id : 4, name: "Ángel José",     city: "Bucaramanga"},
    { id : 5, name: "Carlos Delgado", city: "Nex Mexico" },
    { id : 6, name: "Jhonny Zapata",  city: "Zacatecas"  },
    { id : 7, name: "Bruce Wayne",    city: "Gotham"     },
    { id : 8, name: "Speedy Gonzales",city: "Nex Mexico" }
];

Cada elemento tiene 3 claves que se pueden ordenar numérica y alfabéticamente.

2. Crea una función de clasificación personalizada

JavaScript te ofrece un método nativo que espera como primer argumento una función para ordenar de acuerdo a tus necesidades, por lo que depende de ti escribir esa función. El objetivo de este artículo es mostrarle cómo ordenar por alguna clave una matriz de objetos, por lo que eliminaremos esta función que puede usar simplemente:

/**
 * Función para ordenar alfabéticamente una matriz de objetos por alguna clave específica.
 * 
 * @param {String} propiedad clave del objeto a ordenar.
 */
function dynamicSort(property) {
    var sortOrder = 1;

    if(property[0] === "-") {
        sortOrder = -1;
        property = property.substr(1);
    }

    return function (a,b) {
        if(sortOrder == -1){
            return b[property].localeCompare(a[property]);
        }else{
            return a[property].localeCompare(b[property]);
        }        
    }
}

Como se mencionó, esta función debe inyectarse como primer argumento a la función de clasificación de prototipo de una matriz en JavaScript, por lo que no la usará directamente, ya que solo devolverá 0 o 1. El punto principal de esta función para ordenar es el localeCompare, una función de JavaScript incluida en el prototipo de cadenas que devuelve un número que indica si la cadena1 viene antes, después o es la misma que cadena2 en el orden de clasificación (valores).

3. Ordenar por clave en orden ascendente

Finalmente, para ordenar una matriz de objetos, simplemente llama al método de ordenación de la matriz y pasa como primer argumento la función dynamicSort que espera, así como el primer argumento, una cadena, es decir, la clave del objeto que desea ordenar. En este caso, podríamos comenzar ordenando por la propiedad del nombre usando la siguiente línea de código: 

Importante

Ten en cuenta que el método de ordenación reordena / ordena los elementos de la matriz en la misma variable (por referencia), por lo que el método no devuelve una nueva variable con el nuevo orden, pero la misma variable se modificará en el lugar.

// ordenas el array MyData con una función personalizada
// eso lo ordena alfabeticamente por nombre clave
MyData.sort(dynamicSort("name"));

// muestra datos con nuevo pedido !
console.log(MyData);

Con el código anterior, el console.log generaría el objeto con el nuevo orden:

[  
    { "id":4, "name": "Ángel José",     "city":"Bucaramanga" },
    { "id":1, "name": "Angel Miguel",   "city":"Nex Mexico"  },
    { "id":7, "name": "Bruce Wayne",    "city":"Gotham"      },
    { "id":5, "name": "Carlos Delgado", "city":"Nex Mexico"  },
    { "id":6, "name": "Jhonny Zapata",  "city":"Zacatecas"   },
    { "id":2, "name": "Michael Rogers", "city":"Bogotá"      },
    { "id":8, "name": "Speedy Gonzales","city":"Nex Mexico"  },
    { "id":3, "name": "Steve Rogers",   "city":"New York"    }
]

O pruebe con una nueva clave, por ejemplo, ciudad:

// Sort the MyData array with the custom function
// that sorts alphabetically by the name key
MyData.sort(dynamicSort("city"));

// Display data with new order !
console.log(MyData);

Esto daría como resultado en su lugar:

[
    { "id":2, "name": "Michael Rogers", "city": "Bogotá"     },
    { "id":4, "name": "Ángel José",     "city": "Bucaramanga"},
    { "id":7, "name": "Bruce Wayne",    "city": "Gotham"     },
    { "id":3, "name": "Steve Rogers",   "city": "New York"   },
    { "id":1, "name": "Angel Miguel",   "city": "Nex Mexico" },
    { "id":5, "name": "Carlos Delgado", "city": "Nex Mexico" },
    { "id":8, "name": "Speedy Gonzales","city": "Nex Mexico" },
    { "id":6, "name": "Jhonny Zapata",  "city": "Zacatecas"  }
]

4. Ordenar por clave en orden descendente

Para ordenar una matriz de objetos por alguna clave alfabéticamente en orden descendente, solo necesita agregar como prefijo un -simbolo (menos) al comienzo de la cadena de teclas, por lo que la función de clasificación se ordenará en orden descendente:

// ordenas el array MyData con una función personalizada
// eso lo ordena de forma albafetica por nombre clave de forma descendiente
MyData.sort(dynamicSort("-name"));

// mostrar datos con nuevo pedido !
console.log(MyData);

Esto daría como resultado:

[
    { "id" :3, "name" : "Steve Rogers",    "city":"New York"   },
    { "id" :8, "name" : "Speedy Gonzales", "city":"Nex Mexico" },
    { "id" :2, "name" : "Michael Rogers",  "city":"Bogotá"     },
    { "id" :6, "name" : "Jhonny Zapata",   "city":"Zacatecas"  },
    { "id" :5, "name" : "Carlos Delgado",  "city":"Nex Mexico" },
    { "id" :7, "name" : "Bruce Wayne",     "city":"Gotham"     },
    { "id" :1, "name" : "Angel Miguel",    "city":"Nex Mexico" },
    { "id" :4, "name" : "Ángel José",      "city":"Bucaramanga"}
]

Que te diviertas ❤️!


Interesado en la programación desde los 14 años, Carlos es un programador autodidacta, fundador y autor de la mayoría de los artículos de Our Code World.

Conviertete en un programador más sociable

Patrocinadores