Programación

Sort en JavaScript

Antes de comenzar con esta entrada, quiero platicarles unas pequeñas diferencias que se que ya las saben, pero vamos a reforzarlas.

¿Ejecución en Servidor o en el Cliente?

Muchas veces cuando estamos creando una nueva aplicación (móvil o web) nos causa conflicto saber en donde debemos de ejecutar nuestros procesos. Si el ordenamiento lo hacemos en el Query, en el servidor web (servidor de aplicaciones) o en el cliente.

Mi recomendación es “Siempre que no se impacte y no sea de seguridad prioridad alta o media, podemos hacerlo en el navegador”. ¿Porque? porque sino nos vamos a acabar al Servidor (procesando todo en el).

Hare próximamente una entrada con una explicación mas detallada de este punto. Ahora manos a la obra.

Nos piden que ordenemos dinámicamente una tabla.

Estamos consumiendo un servicio desde nuestro front (java, php, net, etc) con el código HTML y nos piden que la tabla se ordene por diferentes campos. Después de un análisis decidimos que no es necesario crear un servicio con cada método de ordenación ni recargar cada vez que el cliente quiera ordenar por un campo. Si no que vamos hacerlo directamente en el Javascript.

Javascript tiene un método que nos sirve para este objetivo “sort”, la cual recibe de parámetro una función que es usada para ordenar un arreglo.

En nuestro ejemplo nos imaginamos una lista de persona entonces creamos una función que ordena la información de acuerdo al parametro enviado.

var allPersonas = [
  {nombre:'Abraham', apellido:'Valencia', edad: 32},
  {nombre:'Daniel', apellido:'Zepeda', edad: 29},
  {nombre:'Tomas', apellido:'Aguilar', edad: 35}
];


function ordenar(criterio){
 allPersonas = allPersonas.sort((a,b)=>{
   if (a[criterio] < b[criterio]) return -1;
   else if (a[criterio] > b[criterio]) return 1;
   else return 0;
 });
  paint();
}

function paint(){
  var htmlContent = '';
  allPersonas.forEach((p)=>{
    htmlContent += '<tr><td>'+p.nombre+'</td>';
    htmlContent += '<td>'+p.apellido+'</td>';
    htmlContent += '<td>'+p.edad+'</td></tr>';
  });
  document.getElementById('table_tr').innerHTML = htmlContent;
}

paint();

Ahora vamos a ver el funcionamiento de un sort en vivo: https://codepen.io/abrahamstalin/pen/exxyMo

La función de evaluación que se le pasa al metodo sort recibe dos elementos a y b, si a es menor que b regresamos -1 si a es mayor que b regresamos 1 y si son iguales regresamos 0.

Espero que esto les ayude y no pierdan el tiempo creando servicios para ordenar un arreglo de objetos en Javascript.

Recuerden seguirme en @abrahamstalin

Autor

abrahamstalin1@gmail.com

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *