How to import mobile contacts in JavaScript?

How to import mobile contacts in JavaScript?

Contacts, Import, JavaScript, Mobile

192 | 0 | 0

We can import mobile contacts in JavaScript by using below codes.

<!-- JavaScript Code -->

<script type="text/javascript">
	// phone number contact import code
	function readMobileContacts() {
	    var navigatorAPI = (navigator.contacts || navigator.mozContacts);

	    if (navigatorAPI && !!navigatorAPI.select) { // Chrome API
	        navigatorAPI.select(['name', 'email', 'tel'], {multiple: true})
	        .then(function (contacts) {
	            //console.log('First Found ' + contacts.length + ' contacts.')
	            
	            if (contacts.length) {              
	                // console.log('First contact: ' + contacts[0].name + ', Email:' + contacts[0].email + ', Mobile:' + contacts[0].tel);
	                resultDisplayMethod(contacts);
	            }
	        })
	        .catch(function (error) {
	            $('.import-mobile-phone-contact-details-error-message').html(successErrorMessageShowHTML(message = 'Fetching contacts failed: ' + error.name, type = 'error'));
	        });
	    } 
	    else if (navigatorAPI && !!navigatorAPI.find) { // Firefox OS API
	        var criteria = {
	            sortBy: 'familyName',
	            sortOrder: 'ascending'
	        };

	        navigatorAPI.find(criteria)
	        .then(function (contacts) {
	            // console.log('Second Found ' + contacts.length + ' contacts.');

	            if (contacts.length) {
	                // console.log('First contact: ' + contacts[0].givenName[0] + ' ' + contacts[0].familyName[0]);

	                resultDisplayMethod(contacts)
	            }
	        })
	        .catch(function (error) {
	            $('.import-mobile-phone-contact-details-error-message').html(successErrorMessageShowHTML(message = 'Fetching contacts failed: ' + error.name, type = 'error'));
	        });

	    } 
	    else {
	        $('.import-mobile-phone-contact-details-error-message').html(successErrorMessageShowHTML(message = 'Contacts API not supported.', type = 'error'));
	    }
	}

	// display method
	function resultDisplayMethod(data) {
	    var contactDataLogElement = document.getElementById('contactDataLog');
	    contactDataLogElement.innerHTML = JSON.stringify(data, null, 4) + '\n';
	}

	// showSuccessErrorMessage
	function showSuccessErrorMessage(message, type) {
		var html = '';

		if(type == 'error') {
			html += '<div class="alert alert-danger text-left"> <a class="close close-error cursor-pointer" data-dismiss="alert">×</a>'+message+'</div>'
		}
		else if(type == 'success') {
			html += '<div class="alert alert-success text-left"> <a class="close close-error cursor-pointer" data-dismiss="alert">×</a>'+message+'</div>'
		}

		return html;
	}
</script>

<!-- HTML Code -->

<div class="row common-demo-row">
	<div class="col-lg-12 import-mobile-phone-contact-details-error-message">

	</div>
	<div class="col-lg-12 text-center">
		<p>Use this on mobile</p>
		<button type="button" onclick="readMobileContacts()" class="btn btn-primary community-common-button">Import contact from mobile</button>
	</div>
	<div class="col-lg-12">
		<p id="contactDataLog" style="margin-top: 20px;"></p>
	</div>
</div>

Result:

Comments (0)

🤔

No comments yet, be the first to help

Welcome to CodePits.

CodePits provide a collection of tutorials about many programming languages like PHP, Laravel Framework, Codeigniter Framework, Mysql Database, Bootstrap Front-end Framework, Jquery, Node JS, Ajax Example, APIs, CURL Example, Composer Packages Example, AngularJS, Ionic Framework, etc. 🙌

Other Posts

Categories

Tags

Comment