You are using an older browser that might negatively affect how this site is displayed. Please update to a modern browser to have a better experience. Sorry for the inconvenience!

Angular Service for Accessing SharePoint Lists ​Using REST API


Angular Services Introduction

SharePoint Lists can be accessed using REST API. Following is an AngularJS service that helps to create a list item, get items that are already created, update or delete an item from the list using functions that automatically build REST API query. This service has a filter builder which helps to build OData query for filtering and fetching desired items from the list of objects.

THE CODE 

(function() { 

    angular.module('sharepoint.rest', []).factory('sharepointRESTService', sharepointRESTService) 

    sharepointRESTService.$inject = ['$q', '$http']; 



    function sharepointRESTService($q, $http) { 

        var factoryUtil = {}; 



        // Get domain URL automatically 

        factoryUtil.getDomainURL = function() { 

            var deferred = $q.defer(); 



            var US_SP_data = {}; 

            US_SP_data.domain_url = sessionStorage.getItem('US_SPDomainUrl'); 

            US_SP_data.form_digest = sessionStorage.getItem('US_SPFormDigest'); 



            if(US_SP_data.domain_url == null || US_SP_data.form_digest == null) { 

                $http({ 

                    url: "_api/contextinfo", 

                    method: "POST", 

                    headers: { 

                        "accept": "application/json;odata=verbose", 

                        "content-Type": "application/json;odata=verbose" 

                    } 

                }).success(function(result) { 

                    US_SP_data.domain_url = result.d.GetContextWebInformation.WebFullUrl; 

                    US_SP_data.form_digest = result.d.GetContextWebInformation.FormDigestValue; 

                    sessionStorage.setItem('US_SPDomainUrl', US_SP_data.domain_url); 

                    sessionStorage.setItem('US_SPFormDigest', US_SP_data.form_digest); 

                    deferred.resolve(US_SP_data); 

                }); 

            } else { 

                deferred.resolve(US_SP_data); 

            } 



            return deferred.promise; 

        } 



        // HTTP GET 

        factoryUtil.getListItems = function(list_name, filters) { 

            var deferred = $q.defer(); 

            factoryUtil.getDomainURL().then(function(US_SP_data) { 

                var domain_url = US_SP_data.domain_url; 

                var url = domain_url + "/_api/web/lists/GetByTitle('" + list_name + "')/Items?"; 



                if (!angular.isUndefined(filters)) { 

                    url += factoryUtil.build_filters(filters) 

                } 



                $http({ 

                    url: url, 

                    method: "GET", 

                    headers: { 

                        "accept": "application/json;odata=verbose", 

                        "content-Type": "application/json;odata=verbose" 

                    } 

                }).success(function(result) { 

                    deferred.resolve(result.d.results); 

                }).error(function(result, status) { 

                    deferred.reject({ 

                        error: result, 

                        status: status 

                    }); 

                }); 

            }); 

            return deferred.promise; 

        }; 



        // HTTP Create 

        factoryUtil.createListItem = function(list_name, data) { 

            data.__metadata = { 

                "type": factoryUtil.getListName(list_name) 

            }; 



            var deferred = $q.defer(); 

            factoryUtil.getDomainURL().then(function(US_SP_data) { 

                var domain_url = US_SP_data.domain_url; 

                var form_digest = US_SP_data.form_digest; 

                var url = domain_url + "/_api/web/lists/getbytitle('" + list_name + "')/Items"; 



                $http({ 

                    url: url, 

                    method: "POST", 

                    headers: { 

                        "accept": "application/json;odata=verbose", 

                        "X-RequestDigest": form_digest, 

                        "content-Type": "application/json;odata=verbose" 

                    }, 

                    data: JSON.stringify(data) 

                }).success(function(result) { 

                    deferred.resolve(result); 

                }).error(function(result, status) { 

                    deferred.reject({ 

                        error: result, 

                        status: status 

                    }); 

                }); 

            }); 

            return deferred.promise; 

        }; 



        // HTTP Update 

        factoryUtil.updateListItem = function(list_name, list_id, data) { 

            data.__metadata = { 

                "type": factoryUtil.getListName(list_name) 

            }; 

            var deferred = $q.defer(); 

            factoryUtil.getDomainURL().then(function(US_SP_data) { 

                var domain_url = US_SP_data.domain_url; 

                var form_digest = US_SP_data.form_digest; 

                var url = domain_url + "/_api/Web/Lists/getByTitle('" + list_name + "')/Items(" + list_id + ")"; 



                $http({ 

                    url: url, 

                    method: "POST", 

                    headers: { 

                        "accept": "application/json;odata=verbose", 

                        "X-RequestDigest": form_digest, 

                        "content-Type": "application/json;odata=verbose", 

                        "X-HTTP-Method": "MERGE", 

                        "If-Match": "*" 

                    }, 

                    data: data 

                }).success(function(result) { 

                    deferred.resolve(result); 

                }).error(function(result, status) { 

                    deferred.reject({ 

                        error: result, 

                        status: status 

                    }); 

                }); 

            }); 

            return deferred.promise; 

        }; 



        // HTTP Delete 

        factoryUtil.deleteListItem = function(list_name, list_id) { 

            var deferred = $q.defer(); 

            factoryUtil.getDomainURL().then(function(US_SP_data) { 

                var domain_url = US_SP_data.domain_url; 

                var form_digest = US_SP_data.form_digest; 

                var url = domain_url + "/_api/Web/Lists/getByTitle('" + list_name + "')/Items(" + list_id + ")"; 



                $http({ 

                    url: url, 

                    method: "DELETE", 

                    headers: { 

                        "accept": "application/json;odata=verbose", 

                        "X-RequestDigest": form_digest, 

                        "IF-MATCH": "*" 

                    } 

                }).success(function(result) { 

                    deferred.resolve(result); 

                }).error(function(result, status) { 

                    deferred.reject({ 

                        error: result, 

                        status: status 

                    }); 

                }); 

            }); 

            return deferred.promise; 

        }; 



        // Generate List Name 

        factoryUtil.getListName = function(name) { 

            return "SP.Data." + name.charAt(0).toUpperCase() + name.replace('_', '_x005f_').replace(' ', '').slice(1) + "ListItem"; 

        }; 



        // Build filters 

        factoryUtil.build_filters = function(filters) { 

            var url_filter = []; 

            url_filter[0] = []; // select 

            url_filter[1] = []; // orderby 

            url_filter[2] = []; // top 

            url_filter[3] = []; // skip 

            url_filter[4] = []; // filter And 

            url_filter[5] = []; // expand 

            url_filter[6] = []; // filter Or 

            var url = []; 

            if (!angular.isUndefined(filters.select)) { 

                url_filter[0].push(filters.select.join()); 

            } 

            if (!angular.isUndefined(filters.expand)) { 

                angular.forEach(filters.expand, function(columns, field) { 

                    angular.forEach(columns, function(value, key) { 

                        url_filter[0].push(field + '/' + value); 

                    }); 

                    url_filter[5].push(field); 

                }); 

                url_filter[5] = '$expand=' + url_filter[5].join(); 

            } 

            if (!angular.isUndefined(filters.orderby)) { 

                url_filter[1] = '$orderby=' + filters.orderby; 

            } 

            if (!angular.isUndefined(filters.top)) { 

                url_filter[2] = '$top=' + filters.top; 

            } 

            if (!angular.isUndefined(filters.skip)) { 

                url_filter[3] = '$skip=' + filters.skip; 

            } 

            if (!angular.isUndefined(filters.filter)) { 

                angular.forEach(filters.filter, function(value, field) { 

                    url_filter[4].push('(' + field + ' ' + value[0] + ' \'' + value[1] + '\')'); 

                }); 

                url_filter[4] = '$filter=(' + url_filter[4].join(' and ') + ')'; 

            } 

            if (!angular.isUndefined(filters.filterOr)) { 

                angular.forEach(filters.filterOr, function(value, field) { 

                    url_filter[6].push('(' + field + ' ' + value[0] + ' \'' + value[1] + '\')'); 

                }); 

                url_filter[6] = '$filter=(' + url_filter[6].join(' or ') + ')'; 

            } 

            if (url_filter[0].length) url_filter[0] = '$select=' + url_filter[0].join(); 

            angular.forEach(url_filter, function(value, key) { 

                if (url_filter[key].length) url.push(value); 

            }); 

            return url.join('&'); 

        } 

        return factoryUtil; 

    } 

})()

 

LIST OPERATIONS 

To use this service, inject the sharepointRESTService service into your factory or controller.

Getting list items

Items can be retrieved from the list using getListItems() function:

sharepointRESTService.getListItems(listName, filter).then(function(response) { 
      // Handle response 
}); 

Replace list_name with the actual name of the list to fetch items from. filter argument is an optional one where it can use any of the OData query in the following pattern: 

var filter = { 

select: ['field_name', 'id'], 

      expand: { 

      'list_name': ['field_name1', 'field_name2'] 

}, 

      orderby: 'field_name asc/desc', 

      filter: { 

      'field_name': ['lt/gt/eq/ne', 'value'] 

}, 

      top : 5, 

      skip : 5, 

};

 

This filter object will be used to build filters for retrieving items from the list. This is the final URL built:

https://company_name.sharepoint.com/sites/site_name/_api/web/lists/GetByTitle(‘listName’)/Items?$select=field_name,id,list_name/field_name1,list_name/field_name2&$expand=list_name&$orderby=’field_name asc’&$filter=’field_name lt value’&$top=5&$skip=5

Creating a list item

Similarly, a New list item can be created using

sharepointRESTService.createListItem('list_name', data).then(function(response) { 

// success handler 

}, function() { 

// error handler 

}); 

Here, data is an object where keys should be the field/column name of the targeted list and value should be the value for the corresponding field/column name.

Updating a list item

List item can be updated using:

sharepointRESTService.updateListItem(‘list_name’, data.Id, data).then(function(response) {

// Handle response

});

 

Here, data.Id is the identifier for the list item which is unique for the list. Item that matches the Id will get updated. data is an object where keys should be the field/column name of the targeted list and value should be the value for the corresponding field/column name which needs to be updated.

Deleting a list item

List item can be deleted using:

sharepointRESTService.updateListItem(‘list_name’, Id).then(function(response) {

// Handle response

});

Here, Id is the identifier which is unique to the list item – the Id that needs to be deleted.

ADVANTAGES 

This simple angular service helps remove the overhead involved in writing manual queries to interact with SharePoint lists. The automatic generation of OData query to filter results is quick and efficient and maintains the integrity of the code with just objects.

Also, this service uses deferred promise that prevents interfering of other process with the asynchronous callback. This helps dealing with multiple callbacks that are dependent on each other without running into any setbacks.

REFERENCES 

Clone or fork from GitHub: https://github.com/VijayaSankarN/sharepoint-rest

https://dev.office.com/sharepoint/docs/sp-add-ins/use-odata-query-operations-in-sharepoint-rest-requests

https://social.technet.microsoft.com/wiki/contents/articles/35796.sharepoint-2013-using-rest-api-for-selecting-filtering-sorting-and-pagination-in-sharepoint-list.aspx