Html file to add to the Content Web Editor.
<script type="text/javascript" src="/dev/SiteAssets/webparts/Lists/ItemsView.js"></script> <div id="divListItems"></div>
$(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!'); }