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.