SP13 App CRUD Access to SP Task List

Question

I am trying to build an app to access an existing task list to test out a UI but it is throwing an error within the Angular libraries. It can connect to lists within the app but not from the site. The following is my sample code that is causing the library to throw an error.

   var loadItems = function () {
        jQuery.ajax({
            url: "http://usamzap403/_api/lists/getbyTitle('mytodo')/items?$select=ID,Title,Priority,Status,DueDate&$orderby=DueDate",
            type: "GET",
            headers: {
                "accept": "application/json;odata=verbose",
            },
            success: function (data, status, jqXHR) {
                //fill model
                var results = data.d.results;

                var items = [];
                for (var i = 0; i < results.length; i++) {
                    var dt = new Date(results[i].DueDate);
                    var item = {
                        id: results[i].ID,
                        title: results[i].Title,
                        priority: results[i].Priority,
                        status: results[i].Status,
                        dueDate: ((dt.getMonth() + 1) + "/" + dt.getDate() + "/" + dt.getFullYear())
                    };
                    items.push(item);
                }

                //update ui
                $scope.$apply(function () {
                    $scope.items = items;
                });
            },
            error: function (jqXHR, status, message) {
                if (message=="")
                { alert("Controller Home load error") }
                else
                alert(message);
            }
        });
    }
    loadItems();

There seems to be a permissions error as I see a 401 from inside Fiddler.

GET http://usamzap403/_api/lists/getbyTitle('mytodo')/items?$select=ID,Title,Priority,Status,DueDate&$orderby=DueDate HTTP/1.1
Referer: http://app-283522121da4ef.spapp-usamzap403.com/AngularToDo/Pages/Master.aspx?SPHostUrl=http%3A%2F%2Fusamzap403&SPLanguage=en%2DUS&SPClientTag=0&SPProductNumber=15%2E0%2E4569%2E1000&SPAppWebUrl=http%3A%2F%2Fapp%2D283522121da4ef%2Espapp%2DUSAMZAP403%2Econnect%2Ete%2Ecom%2FAngularToDo
Accept: application/json;odata=verbose
Accept-Language: en-US
Origin: http://app-283522121da4ef.spapp-usamzap403.com
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64; Trident/7.0; rv:11.0) like Gecko
Connection: Keep-Alive
Host: usamzap403
Pragma: no-cache

Answer 1

You are trying to access a list in the Host Web from the App Web. To do this you need to do two things:

1. Request permission to read the list in the app manifest
2. Modify the url property of the request to use the cross-domain library

The url should look something like this:

  var appUrl = GetUrlKeyValue("SPAppWebUrl");
  var hostUrl = GetUrlKeyValue("SPHostUrl");

  var url = appUrl + 
    "/_api/SP.AppContextSite(@target)/web/lists/getbyTitle('mytodo')/items?" +         
    "$select=ID,Title,Priority,Status,DueDate&$orderby=DueDate&" + 
    "@target='" + hostUrl + "'";

See this document for more information: Complete basic operations using SharePoint 2013 REST endpoints

You can also check out my Client Object Model and REST API Development course on Pluralsight