Javascript add Sharepoint List data to HTML page
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>
