another technical blog...technically

Monday, August 29, 2016

AngularJS to SP2013 REST repository

Hi there, this is just a fast post about repository in AngularJS using REST API on SharePoint 2013. Someone could say "why don't you use SP client context etc. etc." but this is not a pros/cons post, just a simple snippet in order to copy/paste the code when you'll need it :) .
I decided to post it since it was not so immediate and i had to play with verbs and item properties and maybe could help someone else (i also wrote that 2 months ago, so i don't remember details, so please don't ask me).
Ah, i haven't write method for delete since i don't need it, so have fun :p
repositories.service('ListRepository', ['$http', '$resource', function ($http, $resource) {

    var self = this;

    var listName = "List Name";
    var itemType = "SP.Data.List_x0020_NameListItem";
    var wsAddress = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('" + listName + "')/";

    self.getListItem = function (key, onSuccess, onError) {
        var requestUrl = wsAddress + "items?$filter=Title%20eq%20'" + key + "'";

        $http({
            method: 'GET',
            url: requestUrl,
            headers: { "Accept": "application/json;odata=verbose" }
        })
            .success(function (response) { onSuccess(response); })
            .error(function (response) { onError(response); });
    };


    self.createListItem = function (item, onSuccess, onError) {
        var requestUrl = wsAddress + "items";

        item["__metadata"] = { "type": itemType };
            
        var stringifiedItem = JSON.stringify(item);
        var digest = $("#__REQUESTDIGEST").val();

        $http({
            url: requestUrl,
            method: "POST",
            headers: {
                "accept": "application/json;odata=verbose",
                "X-RequestDigest": digest,
                "content-Type": "application/json;odata=verbose"
            },
            data: stringifiedItem
        })
            .success(function (response) { onSuccess(response); })
            .error(function (response) { onError(response); });
        };


    self.updateListItem = function (item, onSuccess, onError) {

        self.getListItem(item.ExportToNasSetting_Source,
            function (response) {
                var oldItem = response.d.results[0];
                var requestUrl = wsAddress + "items(" + oldItem.Id + ")";

                item["__metadata"] = { "type": itemType };
                var stringifiedItem = JSON.stringify(item);

                var digest = $("#__REQUESTDIGEST").val();

                $http({
                    url: oldItem.__metadata.uri,
                    method: "POST",
                    headers: {
                        "accept": "application/json;odata=verbose",
                        "X-RequestDigest": digest,
                        "content-Type": "application/json;odata=verbose",
                        "X-Http-Method": "MERGE",
                        "If-Match": oldItem.__metadata.etag 
                    },
                    data: item
                })
            .success(function (response) { onSuccess(response); })
            .error(function (response) { onError(response); });
            },
            onError);        
    };

}]);
Please note  that this repository could be considered quite generic, you need to change variables listName and itemType with the ones you use.
Also the method getListItem, use filter query string to filter by title, feel free to play with this method as you like.
Share:

Me, myself and I

My Photo
I'm just another IT guy sharing his knowledge with all of you out there.
Wanna know more?