Sorting an array of objects in Angular2

Question

I am having problems sorting an array of an object in Angular2.

The object looks like this:

[ { "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" } ] 

And stored inside the values variable.

All I want to do is do a *ngFor sort it by the name property.

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

I tried to do this with pipes, but failed unsuccessfully. Any help was appreciated.

Link to the plunker : https://plnkr.co/edit/e9laTBnqJKb8VzhHEBmn?p=preview

Edit

My pipe:

 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; } } 

And just put the pipe name in the html file:

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

Answer 1

Your pipe expects a string, but it receives objects, you must adapt it:

 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 2

Despite the fact that you can solve this problem with a pipe, you should ask yourself if the utility in your project in your specific project is useful to you. Do you often need to sort objects by the "name" key on other arrays or other components in the future? Will this data change often enough and in ways that make it difficult to simply sort in the component? Will you need an array sorted by any change in view or input?

I created an edited plunker in which the array is sorted in the component constructor, but there is no reason that this function could not be transferred to its own method (sortValuesArray, for example) for reuse if necessary.

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

Edited plunker

Answer 3

It can be adapted to any such utility.

 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 }) } } 

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

Hope this saves you some time!

Answer 4

try it

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

Answer 5

Angular still advises against using pipes for sorting and filtering, for example, in angularJs.

This will slow down your application, you will have performance problems. It is much better to provide your sorting in your component before passing it to the template.

The reason is explained by https://angular.io/guide/pipes#no-filter-pipe

If you work with a beautiful, structured component builder, you can do this even when configured:

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