I got my contact list in sorted order too,but I want to get letters at starting of every new alphabet....like a the contacts with a ,b then contacts with b ,,,means grouping..
I am not able to this..I am getting first number ,but after that I am not able to get letters..
ts code-
export class ContactPage {
contactList=[];
groupedContacts = [];
constructor(public navCtrl: NavController,public callNumber:CallNumber,
private contacts: Contacts, private sanitizer: DomSanitizer,public popoverCtrl:PopoverController,public viewCtrl:ViewController) {
this.contacts.find(
["displayName", "phoneNumbers","photos"],
{multiple: true, hasPhoneNumber: true}
).then((contacts) => {
for (var i=0 ; i < contacts.length; i++){
if(contacts[i].displayName !== null) {
var contact = {};
contact["name"] = contacts[i].displayName;
contact["number"] = contacts[i].phoneNumbers[0].value;
if(contacts[i].photos != null) {
console.log(contacts[i].photos);
contact["image"] = this.sanitizer.bypassSecurityTrustUrl(contacts[i].photos[0].value);
console.log(contact);
} else {
contact["image"] = "assets/dummy-profile-pic.png";
}
this.contactList.push(contact);
}
}
this.groupContacts(this.contactList);
});
}
groupContacts(contactList){
let sortedContacts = contactList.sort(function(a, b){
if(a.name < b.name) return -1;
if(a.name > b.name) return 1;
return 0;
});
let currentLetter = false;
let currentContacts = [];
sortedContacts.forEach((value, index) => {
if(value.name.charAt(0) != currentLetter){
currentLetter = value.name.charAt(0);
let newGroup ={
letter: currentLetter,
contacts:[]
};
currentContacts = newGroup.contacts;
this.groupedContacts.push(newGroup);
}
currentContacts.push(value);
});
}
html code--
ion-item-group *ngFor="let group of groupedContacts">
<ion-item-divider color="light">{{group.letter}}</ion-item-divider>
<ion-item-sliding *ngFor="let contact of contactList">
<ion-item>
<ion-avatar *ngIf="contact.image" item-start>
<img [src]="contact.image">
</ion-avatar>
{{contact.name}}
<p>{{contact.number}}</p>
</ion-item>
<ion-item-options side="right">
<button ion-button color="secondary" *ngIf="contact.phoneNumbers"
(click)="callContact(contact.phoneNumbers[0].value)">
<ion-icon name="call"> Call</ion-icon>
</button>
</ion-item-options>
<ion-item-options side="left">
<button ion-button color="danger"
(click)="sendmessage()">
SMS
</button>
</ion-item-options>
</ion-item-sliding>
</ion-item-group>
can u tell where I am wrong..
That's also why I hoped someone had developed the standard library for handling this.