SharePoint: How to access List Data using SPServices jQuery library
In a previous article, what is SPServices, already explained about this JavaScript add-on.
Now, we are going to explain how to access List Data using SPServices. SPServices JavaScript Library ($().SPServices) provides a function called GetListItems to access the data from the list.
The GetListItems function details are:
$().SPServices({
operation: "GetListItems",
async: <true/false>,
listName: <List Name>,
CAMLQuery: <caml Query>,
CAMLQueryOptions: <caml Query Options>,
webURL: <webURL>
});
- operation: name of the $().SPServices operation is "GetListItems"
- async: you can pass true or false
- listName: Name of the list from which data needs to be fetched
- CAMLQuery: You can mention the CAML query XML with filters. For example, if one of the column name in the list is IsAction, then sample CAML query would be:
var camlQuery = "<Query>";
camlQuery += "<Where>";
camlQuery += "<Eq><FieldRef Name='IsActive'/><Value Type='Choice'>Yes</Value></Eq>";
camlQuery += "</Where>";
camlQuery += "</Query>";
- CAMLQueryOptions: You can mention CAML query options like Recursive. For example, you have to fetch the data from sub-folder also then sample CAML query options would be:
var camlQueryOptions = '<QueryOptions><ViewAttributes Scope="Recursive"/></QueryOptions>';
- webURL: This allows you to change the context of the operation to a different site
Now, complete **$().SPServices.**GetListItems operation call would be:
function getListDetails() {
var objResults = null;
var camlQueryOptions = '<QueryOptions><ViewAttributes Scope="Recursive"/></QueryOptions>';
var camlQuery = "";
var listName = 'EmployeeDetails';
//--To get all Active items
camlQuery = "<Query>";
camlQuery += "<Where>";
camlQuery += "<Eq><FieldRef Name='IsActive'/><Value Type='Choice'>Yes</Value></Eq>";
camlQuery += "</Where>";
camlQuery += "</Query>";
var listPromise = $().SPServices({
operation: "GetListItems",
async: false,
listName: listName,
CAMLQuery: camlQuery,
CAMLQueryOptions: camlQueryOptions
});
listPromise.success(function () {
if ($(listPromise.responseText).find("ErrorText").length > 0) {
//--If error occurred
objResults = JSON.parse('{ "status": "error", "message": "servicecallError" }');
console.log($(listPromise.responseXML).find("ErrorText").text());
console.log(objResults);
}
else if ($(listPromise.responseXML).find("row").length > 0 || $(listPromise.responseXML).SPFilterNode("z:row").length > 0) {
//--If success
var objListItem;
var listData = [];
var tempDate = null;
var newDate = null;
$(listPromise.responseXML).SPFilterNode("z:row").each(function () {
objListItem = new Object();
if (!commonfunctions.helpers.isNullOrEmpty($(this).attr('ows_ID'))) {
objListItem.itemId = $(this).attr('ows_ID');
}
else {
objListItem.itemId = "0";
}
if (!commonfunctions.helpers.isNullOrEmpty($(this).attr('ows_Title'))) {
objListItem.empEnterpriseId = $(this).attr('ows_Title');
}
else {
objListItem.empEnterpriseId = "";
}
if (!commonfunctions.helpers.isNullOrEmpty($(this).attr('ows_EmpName'))) {
objListItem.empName = $(this).attr('ows_EmpName');
}
else {
objListItem.empName = "";
}
if (!commonfunctions.helpers.isNullOrEmpty($(this).attr('ows_EmpEmail'))) {
objListItem.empEmail = $(this).attr('ows_EmpEmail');
}
else {
objListItem.empEmail = "";
}
if (!commonfunctions.helpers.isNullOrEmpty($(this).attr('ows_IsAccepted'))) {
objListItem.isAccepted = $(this).attr('ows_IsAccepted');
}
else {
objListItem.isAccepted = "";
}
listData.push(objListItem);
objListItem = null;
});
objResults = ({ status: success, message: listData });
console.log(objResults);
}
else {
//--If error occurred
objResults = JSON.parse('{ "status": "error", "message": "servicecallError::Status Text:In succcess->else block." }');
console.log(objResults);
}
});
listPromise.error(function () {
if ($(listPromise.responseXML).find("errorstring").length > 0) {
//--If error occurred
objResults = JSON.parse('{ "status": "error", "message": "' + $(listPromise.responseXML).find("errorstring").text() + '" }');
console.log(objResults);
}
});
listPromise.fail(function () {
if ($(listPromise.responseXML).find("errorstring").length > 0) {
//--If error occurred
objResults = JSON.parse('{ "status": "error", "message": "' + $(listPromise.responseXML).find("errorstring").text() + '::Status Text:' + listPromise.statusText + '" }');
console.log(objResults);
}
});
return objResults;
}
With the help of above function, you can get the data from the list using SPServices JavaScript library.