Html file to add to the Content Web Editor.

[code lang=”HTML” highlight=”” toolbar=”true”]

<script type="text/javascript" src="/dev/SiteAssets/webparts/Lists/ItemsView.js"></script>
<div id="divListItems"></div>

[/code]

 

[code lang=”js” highlight=”” toolbar=”true”]

$(function () {
retriveListItems();
});

function retriveListItems() {

let siteUrl = _spPageContextInfo.webAbsoluteUrl;
//http://store.patterns-online.com/dev/_api/SP.UserProfiles.PeopleManager/GetMyProperties // view all user properties
//let fullUrl = siteUrl + "/_api/web/lists/GetByTitle(‘Designers%20Contact%20Information’)/items?$select=Title,website,phone,Author/ID,Author/Title&$expand=Author/ID,Author/Title";
let fullUrl = siteUrl + "/_api/web/lists/GetByTitle(‘Contacts Designers’)/items";

$.ajax({
url: fullUrl,
type: "GET",
headers: {
"accept": "application/json;odata=verbose",
"content-type": "application/json; odata=verbose",
},
success: onQuerySucceeded,
error: onQueryFailed
});
}
function onQuerySucceeded(data) {
let length = data.d.results.length;
console.log(data);
let listItemInfo = ”;

listItemInfo += ‘<table class="table table-striped"><thead ><tr>’;
listItemInfo += ‘<th scope="col" style="display:none">Id</th>’;
listItemInfo += ‘<th scope="col">Title</th>’;
listItemInfo += ‘<th scope="col">Phone</th>’;
listItemInfo += ‘<th scope="col">Email</th>’;
listItemInfo += ‘<th scope="col">Website</th>’;

listItemInfo += ‘</tr></thead><tbody>’;

for (let i = 0; i < length; i++) {
let item = data.d.results[i];
let id = item.Id;
let title = item.Title
let phone = item.phone != null ? item.phone: "";
let email = item.Email_x0020_Personal != null ? item.Email_x0020_Personal : "";
let website = item.website != null ? item.website.Url : "";
let photo = item.Photo != null ? item.Photo.Url : "";

listItemInfo += ‘<tr>’;
listItemInfo += ‘<th style="display:none">’+ id + ‘</th>’;
listItemInfo += ‘<td> ‘ + title + ‘</td>’;
listItemInfo += ‘<td>’ + phone + ‘</td>’;
listItemInfo += ‘<td>’ + email + ‘</td>’;
listItemInfo += ‘<td>’ + website + ‘</td>’;
listItemInfo += ‘<td style="width:100px"><img src="’ + photo + ‘" class="img-fluid"></td>’;
listItemInfo += ‘</tr>’;
}

listItemInfo +='</tbody></table>’;

$("#divListItems").html(listItemInfo);
}

function onQueryFailed(sender, args) {
alert(‘Error!’);
}

[/code]