How to sort / order array in Ionic 2?

Question

I have a page with one list from a JSON file. I want to add a sort button functionality. Below is my code of .ts , .html and picture of console.log of the array.

home.ts code:

  this._servall.myservice(this.taskdesc).subscribe(data => {
    console.log(data);
    this.displaylist = data;

home.html code:

<ion-list no-lines *ngFor="let list of displaylist;let i=index;" >
<ion-item>
<p>{{list.TASKDESC}}</p>
<p>{{list.PRIMARY}}</p> 
<p>{{list.DEADLINE_DT}}</p>
</ion-item>
</ion-list>

I want to sort the list with list.PRIMARY //this is a name

I want to sort the list with list.DEADLINE_DT // in increasing order, this is date

Below is the console.log image of this.displaylist array

Can you guide with some code in form of answer which i can upvote — user2828442, Dec 25 '17 at 07:04
Update the question with some sample data and expected output. — Hassan Imam, Dec 25 '17 at 07:05

hrdkisback · Answer 1 · 2017-12-25T09:04:29.240

Create one pipe for sorting

orderbypipe.ts

/*
 * Example use
 *        Basic Array of single type: *ngFor="#todo of todoService.todos | orderBy : '-'"
 *        Multidimensional Array Sort on single column: *ngFor="#todo of todoService.todos | orderBy : ['-status']"
 *        Multidimensional Array Sort on multiple columns: *ngFor="#todo of todoService.todos | orderBy : ['status', '-title']"
 */
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'order', pure: false })
export class OrderBy implements PipeTransform {

    static _orderByComparator(a: any, b: any): number {

        if ((isNaN(parseFloat(a)) || !isFinite(a)) || (isNaN(parseFloat(b)) || !isFinite(b))) {
            //Isn't a number so lowercase the string to properly compare
            if (a.toLowerCase() < b.toLowerCase()) return -1;
            if (a.toLowerCase() > b.toLowerCase()) return 1;
        }
        else {
            //Parse strings as numbers to compare properly
            if (parseFloat(a) < parseFloat(b)) return -1;
            if (parseFloat(a) > parseFloat(b)) return 1;
        }

        return 0; //equal each other
    }

    transform(input: any, [config = '+']): any {

        if (!Array.isArray(input)) return input;

        if (!Array.isArray(config) || (Array.isArray(config) && config.length == 1)) {
            var propertyToCheck: string = !Array.isArray(config) ? config : config[0];
            var desc = propertyToCheck.substr(0, 1) == '-';

            //Basic array
            if (!propertyToCheck || propertyToCheck == '-' || propertyToCheck == '+') {
                return !desc ? input.sort() : input.sort().reverse();
            }
            else {
                var property: string = propertyToCheck.substr(0, 1) == '+' || propertyToCheck.substr(0, 1) == '-'
                    ? propertyToCheck.substr(1)
                    : propertyToCheck;

                return input.sort(function(a: any, b: any) {
                    return !desc
                        ? OrderBy._orderByComparator(a[property], b[property])
                        : -OrderBy._orderByComparator(a[property], b[property]);
                });
            }
        }
        else {
            //Loop over property of the array in order and sort
            return input.sort(function(a: any, b: any) {
                for (var i: number = 0; i < config.length; i++) {
                    var desc = config[i].substr(0, 1) == '-';
                    var property = config[i].substr(0, 1) == '+' || config[i].substr(0, 1) == '-'
                        ? config[i].substr(1)
                        : config[i];

                    var comparison = !desc
                        ? OrderBy._orderByComparator(a[property], b[property])
                        : -OrderBy._orderByComparator(a[property], b[property]);

                    //Don't return 0 yet in case of needing to sort by next property
                    if (comparison != 0) return comparison;
                }

                return 0; //equal each other
            });
        }
    }
}

Html

<ion-list no-lines *ngFor="let list of displaylist | order : ['+PRIMARY'];let i=index;" >

For more details see this http://www.fueltravel.com/blog/migrating-from-angular-1-to-2-part-1-pipes/

by pipe you mean to create a seperate file and import it in `home.ts` ? what should i name it ? — user2828442, Dec 25 '17 at 07:12
Yes, you can create seperate file i gave `orderbypipe.ts` name, also you need to import in `app.module.ts` file and register your class in `declarations`, after import in `app.module.ts` there is no need to import in `home.ts`, you can use that pipe anywhere in project without importing in particular `component`. — hrdkisback, Dec 25 '17 at 07:21
alright, 1 more thing , in the code you provided `orderbypipe.ts` , i just blindly copy as it is and on my html side i add as you did... or did i need to change anything in your provided code ? — user2828442, Dec 25 '17 at 07:47
I have post `html` code as per your post, i think it should work but you have to first try and check. — hrdkisback, Dec 25 '17 at 07:49

How to sort / order array in Ionic 2?

1 Answers1