Read a SharePoint List and put the data on a HTML file through JavaScript function
I have a SharePoint URL which is just a SharePoint list with some columns and rows of data.
I will like to read that information from that specific URL and put the data on a HTML file through a JavaScript function.
I have no experience about JavaScript & HTML5 at all so, I am not sure how to call to those functions in order to retrieve the data.
That's what I have so far and it is not working at all:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
</head>
<script type="text/javascript" src="filelink/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="filelink/jquery.SPServices-0.6.2.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$().SPServices({
operation: "GetListItems",
webURL: "http://myURL.aspx",
async: false,
listName: "Announcements",
CAMLViewFields: "<ViewFields><FieldRef Name='Title' /></ViewFields>",
completefunc: function (xData, Status) {
$(xData.responseXML).SPFilterNode("z:row").each(function() {
var liHtml = "<li>" + $(this).attr("ows_Title") + "</li>";
$("#tasksUL").append(liHtml);
});
}
});
});
</script>
<ul id="tasksUL"/>
<body>
</body>
</html>
If I try to open the index.html nothing happens so I don't know how to call to my functions on my HTML file. Also, I don't know how to define SP.ClientContext in the HTML file.
Thanks a lot in advance.
Answer
The SPServices library will do that for you very easily.
You'll want to use this call. I usually encapsulate it in my own function to make the code prettier, especially if I'm making a lot of AJAX list queries.
Basically what will happen is SharePoint will return an ugly XML document that has all your list items as defined by the Microsoft Documentation. You'll traverse this document using SPServices like this:
<script type="text/javascript" src="filelink/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="filelink/jquery.SPServices-0.6.2.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$().SPServices({
operation: "GetListItems",
async: false,
listName: "Announcements",
CAMLViewFields: "<ViewFields><FieldRef Name='Title' /></ViewFields>",
completefunc: function (xData, Status) {
$(xData.responseXML).SPFilterNode("z:row").each(function() {
var liHtml = "<li>" + $(this).attr("ows_Title") + "</li>";
$("#tasksUL").append(liHtml);
});
}
});
});
</script>
<ul id="tasksUL"/>`
Line by line:
<script type="text/javascript" src="filelink/jquery-1.6.1.min.js"></script>
JQuery is required by SPServices
<script type="text/javascript" src="filelink/jquery.SPServices-0.6.2.min.js"></script>
Including SPServices
$(document).ready(function() {
"When the DOM is loaded, execute this function"
$().SPServices({
"This is an SPServices function"
operation: "GetListItems",
"We are using the 'GetListItems' web service"
async: false,
"Not asynchronous, do it now"
listName: "Announcements",
"We're using the list 'Announcements"
CAMLViewFields: "<ViewFields><FieldRef Name='Title' /></ViewFields>",
Don't worry about this line
completefunc: function (xData, Status) {
"Run this function when the request is complete. The data is passed as xData, the completion status is passed as Status"
$(xData.responseXML).SPFilterNode("z:row").each(function() {
"Take the response string and only take the "row" XML nodes. For each of these nodes, run this function..."
var liHtml = "<li>" + $(this).attr("ows_Title") + "</li>";
"Create a variable called liHtml equal to an li tag and the XML attribute ows_Title"
$("#tasksUL").append(liHtml);
"Append this list item to the element with an ID of 'tasksUL'"