The script will connect to a Sharepoint List and display the list data values in a html table.

Update with the SP List name: var list = “ContactMgr”;

Get Jquery library -> https://cdnjs.com/libraries/jquery.SPServices

<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices-2014.02.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices-2014.02.js" type="text/javascript"></script>

<table id="result-table" >
 <thead>
 <tr> 
 <th>Name</th>
 <th>Phone</th>
 <th>Aliases</th>
 </tr>
 </thead>
 <tbody id="tableBody">
 </tbody>
 </table>

<script type=text/javascript>
 getMyListData() ;
 function getMyListData()
 { 
 var method = "GetListItems"; 
 var webURL = $().SPServices.SPGetCurrentSite() ; 
 var list = "ContactMgr"; 
 var fieldsToRead = "<ViewFields>"+"<FieldRef Name='Name' />" +"</ViewFields>";
 var query = "<Query><OrderBy><FieldRef Name='ID' Ascending='True' /></OrderBy></Query>";

$().SPServices
 ({
 operation: method,
 async: false, 
 webURL: webURL,
 listName: list,
 CAMLViewFields: "<ViewFields Properties='True' />",
 CAMLQuery: query, 
 completefunc: function (xData, Status)
 {
 $(xData.responseXML).SPFilterNode("z:row").each(function() 
 {
 
 var NameV = $(this).attr("ows_FullName");
 var PhoneV = $(this).attr("ows_Phone"); 
 var AliasV = $(this).attr("ows_Aliases");

$("#result-table").append("<tr align='middle'>" +
 "<th>"+NameV+"</th>"+
 "<th>"+PhoneV+"</th>" + 
 "<th>"+AliasV+"</th>" +
 "</tr>");
 });
 
 }
 });
 };

</script>

Interested in learning new skills?