Alphabetical filter in ionic cards

Question

I am making a project for my self and I want to make a alphabetic filter. Everytime I generate a ionic card I want it to be filtered by the firstname. Like Andre , Amber , Beckc etc... This is what I currently have: https://gyazo.com/07f8a2ed6af146634aac6a0edf1c24d2 .

As you can see there is no filter working.

HTML

<ion-header>
  <ion-navbar color ="primary">

    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>{{ appName }}</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
<ion-searchbar></ion-searchbar>
  <ion-grid>
    <ion-row>
      <ion-col col-md-3 col-lg-2  col-xs-6 *ngFor="let item of items">
          <ion-card class="kaart">
          <ion-card-content>
            <ion-avatar item-left>
            <img class="pic" [src]="item.avatar" />
          </ion-avatar>
           <h2>{{item.voornaam}}</h2>
           <h2>{{item.achternaam}}</h2>
           <p>{{item.groep}}</p>
           <ion-icon color ="primary" class="call" name="call"></ion-icon>
           <ion-icon color ="primary" class="chatboxes" name="chatboxes"></ion-icon>
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
</ion-grid>
</ion-content>

TS

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-page1',
  templateUrl: 'page1.html'
})

export class Page1 {
appName = 'Schoolpoort';
items:any;

    constructor(private navCtrl: NavController) {

      this.items = [
      {voornaam: 'Mert', achternaam: 'Sezen', avatar: 'http://placehold.it/100', groep: 'Groep 1'},
      {voornaam: 'Ask Sana', achternaam: 'Benzer', avatar: 'http://placehold.it/100', groep: 'Groep 1'},
      {voornaam: 'Koray', achternaam: 'Avci', avatar: 'http://placehold.it/100', groep: 'Groep 1'},
      {voornaam: 'Recep', achternaam: 'Ivedik', avatar: 'http://placehold.it/100', groep: 'Groep 3'},
      {voornaam: 'Gel', achternaam: 'Sezen', avatar: 'http://placehold.it/100', groep: 'Groep 2'},
      {voornaam: 'Yarim', achternaam: 'Sezen', avatar: 'http://placehold.it/100', groep: 'Groep 3'},
      {voornaam: 'Gonlume', achternaam: 'Sezen', avatar: 'http://placehold.it/100', groep: 'Groep 3'},
      {voornaam: 'Huzur', achternaam: 'Sezen', avatar: 'http://placehold.it/100', groep: 'Groep 2'},
      {voornaam: 'Ver', achternaam: 'Sezen', avatar: 'http://placehold.it/100', groep: 'Groep 2'},
      {voornaam: 'Omrume', achternaam: 'Sezen', avatar: 'http://placehold.it/100', groep: 'Groep 2'},
      {voornaam: 'Soylesin', achternaam: 'Sezen', avatar: 'http://placehold.it/100', groep: 'Groep 3'},
      {voornaam: 'Tum', achternaam: 'Sezen', avatar: 'http://placehold.it/100', groep: 'Groep 3'},
      {voornaam: 'Sarkilar', achternaam: 'Sezen', avatar: 'http://placehold.it/100', groep: 'Groep 2'},
      {voornaam: 'Mustafa', achternaam: 'Ceceli', avatar: 'http://placehold.it/100', groep: 'Groep 2'},
      {voornaam: 'Real', achternaam: 'Madrid', avatar: 'http://placehold.it/100', groep: 'Groep 4'},
      {voornaam: 'Is', achternaam: 'Kampioen', avatar: 'http://placehold.it/100', groep: 'Groep 4'},
      {voornaam: 'Ruud van', achternaam: 'Nistelrooy', avatar: 'http://placehold.it/100', groep: 'Groep 4'},
      {voornaam: 'Dennis', achternaam: 'Bergkamp', avatar: 'http://placehold.it/100', groep: 'Groep 4'},
      {voornaam: 'Emre', achternaam: 'Mor', avatar: 'http://placehold.it/100', groep: 'Groep 4'},
      {voornaam: 'Irem', achternaam: 'Derici', avatar: 'http://placehold.it/100', groep: 'Groep 4'},
      {voornaam: 'qwertyuioplk', achternaam: 'qwertyuioplk', avatar: 'http://placehold.it/100', groep: 'Groep 2'},
      {voornaam: 'Cristiano', achternaam: 'Ronaldo', avatar: 'http://placehold.it/100', groep: 'Groep 1'}
      ]
}
}

Sorry I dont know what that means (bad english). But what I want is this: The first name is Amber Rooney and someone else named Bob Johson. The first ionic card will be with Amber and the second one will be Bob. A , b , c , d . Only by the first name. I hope I made it clear — Mert Sezmis, Jun 16 '17 at 08:05
ok got it, you want something like this https://stackoverflow.com/questions/979256/sorting-an-array-of-javascript-objects — warl0ck, Jun 16 '17 at 08:07

score 0 · Accepted Answer · answered Jun 16 '17 at 08:16

To sort the items according to the name you can write your custom sort function as follows:

this.items = this.items.sort(function(a,b) {return (a.voornaam < b.voornaam) ? -1 : (a.voornaam > b.voornaam) ? 1 : 0 ;});

which will give you the output as:

{voornaam: "Ask Sana", achternaam: "Benzer", avatar: "http://placehold.it/100", groep: "Groep 1"}
{voornaam: "Cristiano", achternaam: "Ronaldo", avatar: "http://placehold.it/100", groep: "Groep 1"}
{voornaam: "Dennis", achternaam: "Bergkamp", avatar: "http://placehold.it/100", groep: "Groep 4"}
{voornaam: "Emre", achternaam: "Mor", avatar: "http://placehold.it/100", groep: "Groep 4"}
{voornaam: "Gel", achternaam: "Sezen", avatar: "http://placehold.it/100", groep: "Groep 2"}
...
{voornaam: "Ver", achternaam: "Sezen", avatar: "http://placehold.it/100", groep: "Groep 2"}
{voornaam: "Yarim", achternaam: "Sezen", avatar: "http://placehold.it/100", groep: "Groep 3"}
{voornaam: "qwertyuioplk", achternaam: "qwertyuioplk", avatar: "http://placehold.it/100", groep: "Groep 2"}

assuming you want it sorted by property voornaam if not then you can just change the compactor property as you like.

Alphabetical filter in ionic cards

HTML

TS

1 Answers1