Office 365 -- Get all members of a SharePoint group and show their profile information from the site collections User Information List

DisplaySharePointGroupMembers.js

(function(window, undefined) {
"use strict";

/**** The following HTML (script) template is placed on the page
<script id="po1persontemplate" type="text/x-custom-template">
	<li>
		<div class='people_details'>
			<h3>{0}</h3>
			<p class='people_job_title'>{1}</p>
			<div class='people_description'>{2}</div>
			<p class='people_email_address'>
				<span>Email:</span> 
				<a href='mailto:{3}'>{3}</a></p>
		</div>
		<div class='people_figure'>
			<a href='{6}' title="view this profile in a new window/tab" target='blank'><img alt='{4}' src='{5}'/>&#160;</div></a>
		<div class='clear'>&#160;</div>
	</li>
</script>
****/

window.rb = window.rb || {};
rb.po1peoplepagelayout = rb.po1peoplepagelayout || {};
rb.people = function() {
	var $container = null;
	var _personTemplate = '';
	var _module = {
		start: start
	};
	return _module;

	function logError(message) {
		$('#errorPanel').html(message);
	}

	function processAjaxFail(promise, xhr, textStatus, error) {
		var resp = xhr.responseText && xhr.responseText.length ? JSON.parse(xhr.responseText) : {},
			errObj = resp.error || resp["odata.error"],
			errHtml = '<div style="color:red;font-family:Calibri;font-size:1.2em;">Exception<br/>&raquo; ' + ((errObj && errObj.message && errObj.message.value) ? errObj.message.value : (xhr.status + ' ' + xhr.statusText)) + '</div>',
			errMsg = 'Error>> ' + ((errObj && errObj.message && errObj.message.value) ? errObj.message.value : (xhr.status + ' ' + xhr.statusText));
		if (promise)
			promise.reject({
				error: errMsg,
				html: errHtml
			});
		else
			return {
				error: errMsg,
				html: errHtml
			};
	}

	function getGroupMemberDetails(userId, userTitle) {
		function getMemberDetailsSuccess(userInfo) {
			var pictureUrl = _spPageContextInfo.webServerRelativeUrl + '/_layouts/15/userphoto.aspx?size=L&accountname=' + userInfo.EMail;
			var profileUrl = _spPageContextInfo.webServerRelativeUrl + '/_layouts/15/userdisp.aspx?ID=' + userInfo.Id;
			var html = String.format(_personTemplate,
				userInfo.Title,
				userInfo.JobTitle,
				userInfo.Notes,
				userInfo.EMail,
				userInfo.FirstName,
				pictureUrl.replace(/_MThumb/gi, '_LThumb'),
				profileUrl);
			return html;
		}

		function getMemberDetailsFail(xhr) {
			var errorObj = processAjaxFail(null, xhr);
			var html = String.format(_personTemplate,
				userTitle,
				'',
				'Unable to get this users details.' + errorObj.html,
				'',
				'',
				_spPageContextInfo.webServerRelativeUrl + '/_layouts/15/userphoto.aspx?size=L&accountname=',
				_spPageContextInfo.webServerRelativeUrl + '/_layouts/15/userdisp.aspx?ID=' + userId);
			return html;
		}
		return $.ajax({
				type: 'GET',
				url: String.format("{0}/_api/web/Lists/GetByTitle('User Information List')/Items/GetById({1})?$select=Id,Title,JobTitle,Notes,EMail,FirstName,LastName,Picture", _spPageContextInfo.siteServerRelativeUrl, userId),
				headers: {
					Accept: 'application/json;odata=minimalmetadata'
				}
			})
			.then(getMemberDetailsSuccess, getMemberDetailsFail);
	}

	function processGroupMembers(groupMembers) {
		var html = [],
			counter = 0;
		var p = new $.Deferred();
		$container.empty();
		for (var i = 0; i < groupMembers.length; i++) {
			if (window.console) {
				window.console.log(String.format(">>getGroupMemberDetails({0},{1})", groupMembers[i].Id, groupMembers[i].Title));
			}
			getGroupMemberDetails(groupMembers[i].Id, groupMembers[i].Title)
				.done(function(data) {
					$container.append(data);
					if ((++counter) === groupMembers.length) p.resolve(counter);
				})
				.fail(function(data) {
					$container.append(data);
					if ((++counter) === groupMembers.length) p.resolve(counter);
				});
		}
		return p.promise();
	}

	function getGroup(groupName) {
		if (window.console) {
			window.console.log(String.format(">>getGroup({0})", groupName));
		}
		var p = new $.Deferred();
		$.ajax({
				type: 'GET',
				url: String.format("{0}/_api/web/SiteGroups/GetByName('{1}')/Users?$select=Id,Title&$orderby=Title asc", _spPageContextInfo.siteServerRelativeUrl, groupName),
				headers: {
					Accept: 'application/json;odata=minimalmetadata'
				}
			})
			.done(function(response) {
				p.resolve(response.value);
			})
			.fail(processAjaxFail.bind(null, p));
		return p.promise();
	}

	function start() {
		if (!rb.po1peoplepagelayout.GroupName || !rb.po1peoplepagelayout.GroupName.length) {
			logError("<h2 style='color:#ea3592;'>A SharePoint Group Title has not yet been configured for this page!</h2>");
			return;
		}
		$container = $('.people_section ul');
		_personTemplate = $('#po1persontemplate').html();

		getGroup(rb.po1peoplepagelayout.GroupName)
			.then(processGroupMembers)
			.done(function(response) {
				if (window.console) {
					window.console.log(">>FINISHED: " + response);
				}
			})
			.fail(function(errObj) {
				logError(errObj.html);
			});
	}
}();

$(rb.people.start);

})(window);