How to make alphabet index list in ionic 2?

Question

am new for ionic 2 angular development i want to create like alphabetic index list like contacts how to achieve it ? let me post what i have tried so far this is my html page:

<ion-header>
  <ion-navbar color="secondary">
    <ion-title>Contract</ion-title>
  </ion-navbar>
</ion-header>

<ion-content >
  <ion-list *ngFor="let contracts of contractlist ; let i = index;">
    <ion-card   >

         <ion-item   (click)="onClickContract($event,contracts)">
           <h2> {{contracts.HeaderText}}</h2>
             <p>{{contracts.SubText}}</p>
             <p item-right >{{contracts.ApprovalCount}}</p>
        </ion-item>
        </ion-card>
         </ion-list>
</ion-content>

This is ts page:

import { Component } from '@angular/core';
import { Events, NavController, NavParams, LoadingController } from 'ionic-angular';
import { ContractService } from '../../services/contract.service';
import { ViewPage } from '../view/view';
@Component({
  selector: 'page-home',
  templateUrl: 'home.html',

})
export class HomePage {
    private contractlist:any;
    result: any;

  constructor(  public contractservice: ContractService 
                ,public navCtrl: NavController, 
          ) {
           this.loadcontract();
  }
  loadcontract() {

    this.contractservice.readContract().then(data => {
            this.result = data;
            this.contractlist = this.result;    
        });

  }
  onClickContract(event,contracts) {
        this.navCtrl.push(ViewPage, { contracts: contracts });
    }
    }

I am fetching data from webservice my json format will

[{"Header":"Contract","Name":"Bal"},{"Header":"Stores","Name":"store pre"},{"Header":"Contract","Name":"Balls"},{"Header":"Stores","Name":"Tyoe"},{"Header":"Incident":"Name":"df"}]

This is the Json format am getting from server.

This is how my list should look like :

Contract
 --bal
 --balls
Stores
 --store pre
 --tyoe
Incident
 --df

Thanks in advance !!

score 0 · Answer 1 · answered Jul 27 '17 at 11:59

Either you sort your array from the webservice or you can add a sorting pipe to your ngfor, but you have to write it yourself (angular1 had this implemented).

The code would look something like this:

  <ion-list *ngFor="let contracts of contractlist | sortBy ; let i = index;">

Check this post on how to write a sorting pipe: https://stackoverflow.com/a/35158836/2157581

How to make alphabet index list in ionic 2?

1 Answers1