Problem in sorting JSON value in descending order

Question

I am working on Angular project where I want to short players by playerCreditPoint in desending order from below json

0: {playerName: "Imran Tahir",  country: "Dolphins", playerCreditPoint: "1.50"}
1: {playerName: "xyx",  country: "Dolphins", playerCreditPoint: "6.50"}
2: {playerName: "abc",  country: "Dolphins", playerCreditPoint: "4.50"}
3: {playerName: "def",  country: "Dolphins", playerCreditPoint: "11.50"}
4: {playerName: "mno",  country: "Dolphins", playerCreditPoint: "10.50"}
5: {playerName: "pqr",  country: "Dolphins", playerCreditPoint: "9.50"}

for that I am using pipes

 <div class="all_players" *ngFor="let player of players | orderBy :player; let pIndex = index">

But it is not working as giving error The pipe 'orderBy' could not be foundAngular

can you remove the space between the orderBy and :player and try again let me know if it works or not — Yash Rami, Mar 20 '19 at 06:52
See this SO threads: [1](https://stackoverflow.com/questions/32882013/angular-2-sort-and-filter), [2](https://stackoverflow.com/a/38276428/1331040), [3](https://stackoverflow.com/questions/48403154/orderby-with-ngfor-array) — Harun Yilmaz, Mar 20 '19 at 06:54

Oz Lodriguez · Answer 1 · 2019-03-20T07:18:49.103

Angular does not have an OrderBy or filter pipe by default: https://angular.io/guide/pipes#no-filter-pipe But the next snippet might be of some help. Please add your own type checks if item contains strings or non arr datatypes.

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

@Pipe({
    name: 'orderBy'
})
export class OrderBy implements PipeTransform {
    transform(array, orderBy) {
        // descending
        return Array.from(array).sort((item1: any, item2: any) =>
            this.comparator(item2[orderBy], item1[orderBy])
        );
    }

    comparator(a: any, b: any): number {
        if (parseFloat(a) < parseFloat(b)) {
            return -1;
        }
        if (parseFloat(a) > parseFloat(b)) {
            return 1;
        }

        return 0;
    }
}

Without the angular sauce, what you are looking for is essentially

const data = [
  { playerName: "Imran Tahir", country: "Dolphins", playerCreditPoint: 1.5 },
  { playerName: "xyx", country: "Dolphins", playerCreditPoint: 6.5 },
  { playerName: "abc", country: "Dolphins", playerCreditPoint: 4.5 },
  { playerName: "def", country: "Dolphins", playerCreditPoint: 11.5 },
  { playerName: "mno", country: "Dolphins", playerCreditPoint: 10.5 },
  { playerName: "pqr", country: "Dolphins", playerCreditPoint: 9.5 }
];

function orderBy(arr) {
  return arr.sort((item1: any, item2: any) => {
    return comparator(item2, item1);
  });
}

function comparator(a: any, b: any) {
  return a.playerCreditPoint - b.playerCreditPoint;
}

console.log(orderBy(data));

score 0 · Answer 2 · answered Mar 20 '19 at 07:01

0

Angular does not have orderBy pipe.

Alternatively, you can use ngx-order-pipe or You can create your own pipe for sorting.

Link: https://www.npmjs.com/package/ngx-order-pipe

OR

Go to this link for creating your own pipe.

answered Mar 20 '19 at 07:01

Surjeet Bhadauriya

6,755
3
34
52

Problem in sorting JSON value in descending order

2 Answers2