javascript - reorder - Ordenar una matriz de objetos en Angular2

sort array javascript by key

Question

Tengo problemas con la ordenación de una matriz de objetos en Angular2.

El objeto se parece a:

[
  {
    "name": "t10",
    "ts": 1476778297100,
    "value": "32.339264",
    "xid": "DP_049908"
  },
  {
    "name": "t17",
    "ts": 1476778341100,
    "value": "true",
    "xid": "DP_693259"
  },
  {
    "name": "t16",
    "ts": 1476778341100,
    "value": "true",
    "xid": "DP_891890"
  }
]

Y se está almacenando dentro de la variable de values .

Todo lo que quiero es hacer que el bucle *ngFor ordene por la propiedad name .

<table *ngIf="values.length">
    <tr *ngFor="let elem of values">
      <td>{{ elem.name }}</td>
      <td>{{ elem.ts }}</td>
      <td>{{ elem.value }}</td>
    </tr>
</table>

Intenté hacerlo con tuberías, pero fracasó miserablemente. Cualquier ayuda apreciada.

Enlace de Plunker : https://plnkr.co/edit/e9laTBnqJKb8VzhHEBmn?p=preview

Editar

Mi pipa

import {Component, Inject, OnInit, Pipe, PipeTransform} from ''@angular/core'';

@Component({
  selector: ''watchlist'',
  templateUrl: ''./watchlist.component.html'',
  styleUrls: [''./watchlist.component.css''],
  pipes: [ ArraySortPipe ]
})
@Pipe({
  name: "sort"
})

export class ArraySortPipe implements PipeTransform {
  transform(array: Array<string>, args: string): Array<string> {
    array.sort((a: any, b: any) => {
      if (a < b) {
        return -1;
      } else if (a > b) {
        return 1;
      } else {
        return 0;
      }
    });
    return array;
  }
}

Y simplemente ponga el nombre de la pipe en el archivo html:

<tr *ngFor="let elem of values | sort">

Answer 1

Angular aún aconseja no usar tuberías para clasificar y filtrar, como en los angulares.

Ralentizará su aplicación, tendrá algunos problemas de rendimiento. Es mucho mejor proporcionar su clasificación en su componente antes de pasarlo a la plantilla.

El motivo se explica en https://angular.io/guide/pipes#no-filter-pipe

Si trabajas con un buen diseño de componentes estructurado, puedes hacerlo incluso en te setter:

 @Input()
  set users(users: Array<User>) {
    this.usersResult = (users || []).sort((a: User, b: User) => a.name < b.name ? -1 : 1)
  }

Answer 2

Aunque puede resolver este problema con una tubería, debe preguntarse si la reutilización de una tubería le es útil en su proyecto particular. ¿Necesitará a menudo ordenar los objetos por la clave de "nombre" en otros arreglos u otros componentes en el futuro? ¿Cambiarán estos datos con la frecuencia suficiente y de manera que resulte difícil clasificar el componente? ¿Necesitará la matriz ordenada en cualquier cambio en la vista o entradas?

Creé un plunker editado en el que la matriz está ordenada en el constructor del componente, pero no hay razón para que esta funcionalidad no pueda moverse a su propio método (por ejemplo, sortValuesArray) para reutilizarla si es necesario.

constructor() {
  this.values.sort((a, b) => {
    if (a.name < b.name) return -1;
    else if (a.name > b.name) return 1;
    else return 0;
  });
}

Editado Plunker

Answer 3

Esto es adaptable a cualquiera de estos casos de uso.

import { Pipe, PipeTransform } from ''@angular/core'';

@Pipe({
  name: ''sortBy''
})
export class SortByPipe implements PipeTransform {
  transform(arr: Array<any>, prop: any, reverse: boolean = false): any {
    if (arr === undefined) return
    const m = reverse ? -1 : 1
    return arr.sort((a: any, b: any): number => {
      const x = a[prop]
      const y = b[prop]
      return (x === y) ? 0 : (x < y) ? -1*m : 1*m
    })
  }
}

Uso:-
<div *ngFor="let item of list | sortBy: ''isDir'': true">

ACTUALIZAR
Consulte Bo''s respuesta Bo''s ya que no se recomienda filtrar y clasificar las tuberías.

Answer 4

Prueba esto

Ordenar desde A hasta final de alpahbet:

this.suppliers.sort((a,b)=>a.SupplierName.localeCompare(b.SupplierName));

Z => A (orden inverso)

this.suppliers.sort((a,b)=>b.SupplierName.localeCompare(a.SupplierName));

Answer 5

Tu tubería espera cadenas pero obtiene objetos, debes adaptarla:

export class ArraySortPipe implements PipeTransform {
  transform(array: Array<any>): Array<string> {
    array.sort((a: any, b: any) => {
      if (a.name < b.name) {
        return -1;
      } else if (a.name > b.name) {
        return 1;
      } else {
        return 0;
      }
    });
    return array;
  }
}

Answer 6

es simple, por ejemplo, si tiene este objeto de matriz:

 cars = ["Dodge", "Fiat", "Audi", "Volvo", "BMW", "Ford"];

y desea tener el objeto ordenado en el frente de HTML, use:

 <li ng-repeat="x in cars | orderBy">{{x}}</li>

De forma predeterminada, las cadenas se ordenan alfabéticamente y los números se ordenan numéricamente.

Si tienes esta matriz con claves:

customers = [
{"name" : "Bottom-Dollar Marketse" ,"city" : "Tsawassen"},
{"name" : "Alfreds Futterkiste", "city" : "Berlin"},
{"name" : "Bon app", "city" : "Marseille"},
{"name" : "Cactus Comidas para llevar", "city" : "Buenos Aires"},
{"name" : "Bolido Comidas preparadas", "city" : "Madrid"},
{"name" : "Around the Horn", "city" : "London"},
{"name" : "B''s Beverages", "city" : "London"}
];

Utilizar:

Ordenar la matriz por orden de "ciudad" DESC:

<li ng-repeat="x in customers | orderBy : ''-city''">{{x.name + ", " + x.city}}</li>

Ordenar la matriz por "ciudad":

<li ng-repeat="x in customers | orderBy : ''city''">{{x.name + ", " + x.city}}</li>