Please help me. I can not use the pipe to do a sort on my list

Ionic Framework ionic-v3
1

I need to sort a list in descending order.

2

I have a tutorial that explains why filter and orderBy pipes aren’t available in Angular 2, and how you can go about filtering your data instead: https://www.joshmorony.com/high-performance-list-filtering-in-ionic-2/

In short, modify your data with JS and display that in the template.

3

Hi @joshmorony .

So it’s that these data are in an array, I just wish that in * ngfor would already load in descending order.

Example:

agenda.ts

export class AgendaPage {

players: any;
modifiedData: any;

constructor(public navCtrl: NavController, public navParams: NavParams) {

this.players = [
  {
      "firstName": "Morgan",
      "lastName": "Benton",
      "username": "mbenton",
      "age": "10",
      "teamId": 1
  },
  {
      "firstName": "Kelsey",
      "lastName": "Banks",
      "username": "kbanks",
      "age": "5",
      "teamId": 2
  },
  {
      "firstName": "Jessica",
      "lastName": "Martinez",
      "username": "jmartinez",
      "age": "1",
      "teamId": 3
  },
  {
      "firstName": "Maggie",
      "lastName": "Walker",
      "username": "mwalker",
      "age": "10",
      "teamId": 4
  }
        ];

}

AGENDA.HTML

{{player.firstName}}

4

There is no built-in option to do this (and for good reason), you will need to sort the array in agenda.ts.

5

How do This, Please @joshmorony

Show me With Example Below ::

Please, Leave a short of code here. with this function

6

I need to modify this function to put order list automatic

filterItems(searchTerm){

    return this.items.filter((item) => {
        return item.title.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1;
    });

}
7

You will want to use a sort rather than a filter, see here for an example: http://stackoverflow.com/questions/979256/sorting-an-array-of-javascript-objects

How you implement it will depend on what you want to sort by. You can find more in-depth documentation here: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

8

Thank You So much.

But this is in .JS Not Angular2

Sorry I´m very confused =/!

Show one example in Angular / Ionic2 Please

9

Josh,

Please, show me one example inside Ionic2 in list

Example:

homes = [
{
“h_id”: “3”,
“city”: “Dallas”,
“state”: “TX”,
“zip”: “75201”,
“price”: “162500”
}, {
“h_id”: “4”,
“city”: “Bevery Hills”,
“state”: “CA”,
“zip”: “90210”,
“price”: “319250”
}, {
“h_id”: “5”,
“city”: “New York”,
“state”: “NY”,
“zip”: “00010”,
“price”: “962500”
}
];

Please. Show me Here How do this in Sort By price DESC

10

Angular 2 / Ionic 2 use TypeScript, which is a superset of JavaScript, so you can still just use normal JavaScript in your code.

In that example, you would do something like this:

homes.sort((a, b) => {
    return parseFloat(b.price) - parseFloat(a.price);
});

In your case, you would just call whatever sort function you need to use after initially defining your array in the constructor, i.e:

this.players = [
...
];

this.players.sort((a,b) => {
    return whatever;
});
11

@joshmorony

Josh,

Neste caso o que estou fazendo aqui esta certo ??

HOME.TS

this.eventData.getEventList().on(‘value’, snapshot => {
let rawList = [];

  snapshot.forEach( snap => {
    rawList.push({
      id: snap.key,
      nome: snap.val().nome,
      descricao: snap.val().descricao,
      local: snap.val().local,
      data_evento: snap.val().data_evento,
      banner: snap.val().banner,
      tipo: snap.val().tipo,
    });
  });

   this.eventList = rawList;
  // console.log(this.eventList);
  console.log(rawList);

});

}

ionViewDidLoad() {

this.eventList.sort((a,b) => {
// return whatever;
  return  parseFloat(a.id) - parseFloat(b.id);

});

  }

HOME.HTML

{{event?.nome}}

Descrição: {{event?.descricao}}

Local: {{event?.local}}

Data: {{event?.data_evento}}