2

Necesito organizar una lista de producto ordenado por un Array de String como propiedades del Array de objetos

ejemplo: Caso 1

<div *ngFor="let producto of productos| orderBy:'nombre,descripcion' : 'ASC' || 'DES'"></div>

ejemplo: Caso 2

<div *ngFor="let producto of productos| orderBy:['nombre','descripcion'] : 'ASC' || 'DES'"></div>

ejemplo: Caso 3

<div *ngFor="let producto of productos| orderBy: ordenPropiedades  : 'ASC' || 'DES'"></div>
9
  • Hola Daniel, estás buscando un ejemplo de pipe para implementar? Saludos
    – KN_
    el 27 jun. 2017 a las 17:24
  • Estoy buscando construir mi propio orderBy pero no lo he logrado, seria muy sencillo de hacer un orderBy si simplemente fuera un arreglo de String, Ejemplo: ["Carlos", "Andres", "Juan", "David"], pero lo que necesito es que puede ordenar un arreglo de Objetos ordenándolo en el orden de la propiedades que le pase al filtro, como lo deje en los ejemplos de la pregunta el 27 jun. 2017 a las 17:30
  • para mejor explicación, los objetos son productos, y estos tienen dos propiedades que quiero organizar en la lista, el primer orden, es que estén ordenados por categoría y luego de eso estén ordenados alfabéticamente el 27 jun. 2017 a las 19:02
  • Algo asi como productos: Array<any> = [ {nombre:'g_nombre', categoria:'aseo'}, {nombre:'f_nombre', categoria:'aseo'}, {nombre:'e_nombre', categoria:'alimentos'}, {nombre:'d_nombre', categoria:'perecederos'}, {nombre:'c_nombre', categoria:'aseo'}, {nombre:'b_nombre', categoria:'alimentos'}, {nombre:'a_nombre', categoria:'aseo'}, ]; template: ` <div *ngFor='let nombre of nombres | orderBy:["categoria","nombre"]'>{{nombre.nombre}} - {{nombre.apellido}}</div> ` transform(array: any, by:string[]): Todo[] {} algo mas o menos el 27 jun. 2017 a las 19:08
  • Algo así? plnkr.co/edit/aPVOFPAePidzPzNRNoAB?p=preview
    – KN_
    el 27 jun. 2017 a las 22:03

1 respuesta 1

2

Basado en tu comentario, dejo plasmada la respuesta para futuras referencias:

Archivo miPipe.ts:

@Pipe({ 
   name: 'ordenar' 
}) 

export class Ordenar implements PipeTransform { 
   transform(values: Array<any>, propiedades: string[], direccion: string[] ): Array<any> { 

   // en el atributo dirreccion se escribe "des" o "DES" para invertir el orden en sentido descendente y "asc" o "ASC" para un orden ascendente


   for( let x = propiedades.length-1; x >=0 ; x-- ){    
      let mapped = values.map(function( el, i ) {
         return { index: i, value: el };

       })
       mapped.sort(function(a, b) {
       return +( a.value[propiedades[x]] > b.value[propiedades[x]]) || +(a.value[propiedades[x]] === b.value[propiedades[x]] ) - 1;
       });

       values = mapped.map(function(el){
         return values[el.index];
       });
       if( direccion[x] === "des" || direccion[x] === "DES" ){
          values = values.reverse();
       }

   }
   return values;
   } 
} 

Archivo html:

<ion-item *ngFor=" let producto of productos | ordenar: [ 'category', 'p_name', 'favorito' ] : [ 'asc', 'asc', 'des' ]; let i = index ">
 {{producto.p_name}}
 ...
</ion-item>

También dejo el ejemplo funcional en un plnkr, en el cual dejo incluida también la solución original por si alguien mas puede encontrar diferentes variaciones que les puedan ser de utilidad: http://plnkr.co/edit/aPVOFPAePidzPzNRNoAB?p=preview

Desde ya, muchas gracias y un saludo.

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.