Sort array of objects based on property in typescript

Question

I'm showing an array with items of type 'request' in a table. I want to sort the columns of the table so I planned to make a click method for every column header. This methods sorts the array based on the value of the property shown in that column.

public sortProduct(): void {

    this.requests.sort((a, b) => {
        if (a.productName < b.productName)
            return -1;
        if (a.productName > b.productName)
            return 1;
        return 0;
    });

    if (!this.productSortOrder) {
        this.requests.reverse();
        this.productSortOrder = true;
    } else {
        this.productSortOrder = false;
    }        
}

This works, but now I need to make a method for every column. I am looking for a way to call a sort method like this:

this.requests.sortMethod(property, order);

This method would then sort the requests array based on the property of the objects in the array and in the given sortorder. How can I do that? I guess I'm looking for something like Func<> in C#.

Titian Cernicova-Dragomir · Accepted Answer · 2018-03-01 12:30:32Z

10

You can us a function signature for a similar effect to Func

sortProduct<T>(prop: (c: Product) => T, order: "ASC" | "DESC"): void {
    this.requests.sort((a, b) => {
        if (prop(a) < prop(b))
            return -1;
        if (prop(a) > prop(b))
            return 1;
        return 0;
    });

    if (order === "DESC") {
        this.requests.reverse();
        this.productSortOrder = true;
    } else {
        this.productSortOrder = false;
    }        
}
// Usage
sortProduct(p=> p.productName, "ASC");

Or you can use the property name instead (keyof Product will ensure the string must be a property of Product):

sortProduct<T>(propName: keyof Product, order: "ASC" | "DESC"): void {
    this.requests.sort((a, b) => {
        if (a[propName] < b[propName])
            return -1;
        if (a[propName] > b[propName])
            return 1;
        return 0;
    });
    ...
} 
// Usage
sortProduct("productName", "ASC");
sortProduct("productName_", "ASC"); // Error

edited Mar 1, 2018 at 12:30

answered Mar 1, 2018 at 11:43

Titian Cernicova-Dragomir

253k37 gold badges464 silver badges394 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Willem de Jong Over a year ago

Thanks, I've got it working but I don't understand the 'function signature'. I left out the word function and added it to my class. The call to it would now be this.sortProduct(p=> p.productName, "ASC");

Titian Cernicova-Dragomir Over a year ago

a function signature is the same as Func the above signature would be the same as Func<Product, T> (I'm assuming you have a C# background and this makes sene to you). The syntax is (paramList) => returnType where paramList is param1: pramType1, param2: pramType2,...

jerrybarolo · Accepted Answer · 2019-03-27 13:29:06Z

5

You can use a SortUtil class with a static template method sortByProperty:

export class SortUtil {

    static sortByProperty<T>(array: T[], propName: keyof T, order: 'ASC' | 'DESC'): void {
        array.sort((a, b) => {
            if (a[propName] < b[propName]) {
                return -1;
            }

            if (a[propName] > b[propName]) {
                return 1;
            }
            return 0;
        });

        if (order === 'DESC') {
            array.reverse();
        }
    }
}

edited Mar 27, 2019 at 13:29

answered Mar 27, 2019 at 11:42

jerrybarolo

511 silver badge5 bronze badges

Collectives™ on Stack Overflow

Sort array of objects based on property in typescript

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related