Hello Readers,

This post is about Cordova contacts plugin which provides access to the device's contacts database. So in our Cordova application, we can access the contacts from device.

First, we need to install the plugin through CLI:

$ cordova plugin add cordova-plugin-contacts

This plugin works on Android, iOS, Windows Phone 8 and Blackberry 10 platforms.

Now, here is the full example:

index.html

<ion-view view-title="Contacts">
  <ion-content class="has-header">
  <ion-list>
  <ion-item ng-repeat="contact in contacts
  | orderBy:sortType:sortReverse | unique: 'displayName'"">
  <p>{{contact.displayName}}</p>
  <p>{{contact.phoneNumbers[0].value}}</p>
  </ion-item>
  </ion-list>
  </ion-content>
</ion-view>

In the above code, We displays contacts by alphabetical order and a filter function unique which excludes the duplicate data. We are showing contacts display name and their contact number.

controller.js

$scope.contacts = [];
document.addEventListener("deviceready", init, false);
function init() {
  navigator.contacts.find([navigator.contacts.fieldType.displayName],onSuccess,errorHandler);
}
function errorHandler(e) {
  console.log("errorHandler: "+e);
}
function onSuccess(contact) {
  for(var i=0, len=c.length; i<len; i++) {
  $scope.contacts.push(contact[i]);
  $scope.sortType = "displayName";
  $scope.sortReverse = false;
  }
}

In the above code,  navigator.contacts.find  method access the contacts database in the device.

filter which is used to remove duplicate data

app.filter('unique', function() {
  return function(collection, keyname) {
  var output = [], 
  keys = [];

  angular.forEach(collection, function(item) {
  var key = item[keyname];
  if(keys.indexOf(key) === -1) {
  keys.push(key);
  output.push(item);
  }
  });
  return output;
  };
});

In the above code, we are using this filter function for exclude duplicate data and show the original one if there is some duplicate data stored in device's contacts database.

The above example is showing sorted contacts and filter out duplicate results.

For more details please visit : cordova-plugin-contacts

Hope this will help you. Have a nice day.  :)