Creating an App for Sharepoint using Dev, Angularjs and Restapi

Asked

Viewed 313 times

2

I need to create an app for Sharepoint that does the simple task of listing fields from a list on the screen where the App is placed inside Sharepoint.

I’m making the following mistake: No 'Access-Control-Allow-Origin' header is present on the requested Resource.

This code is within the.aspx default created by Napa:

<div ng-app>
    <b>Lista simples AngularJS + Sharepoint!</b>
    <div ng-controller="MyController" class="ng-scope">
        <div ng-repeat="p in Products">
            Product Name: {{p.ProductName}} <br />
            Rate: Rs. {{p.ProductRate}} <br />
            <hr />
        </div>
    </div>
</div>

<script>    
    function MyController($scope) {
        $scope.loadREST = function () {
            jQuery.ajax({
                url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('ProductList')/items?$select=ProductName,ProductRate",
                type: "GET",
                dataType: "JSONP",
                headers: { "Accept": "application/json;odata=verbose" },
                success: function (data) {
                    var newData = [];
                    jQuery.each(data.d.results, function (index, value) {
                        newData.push({ ProductName: value.ProductName, ProductRate: value.ProductRate});
                    });
                    $scope.$apply(function () {
                        $scope.Products = newData;
                    });
                },
                error: function () {
                    //alert(_spPageContextInfo.webAbsoluteUrl);
                    alert("erro de conexão");
                }
            });
        };
        $scope.loadREST();
    }
</script>
  • This error you report is typical of ajax request being denied because you are trying to access another domain. If you take the value of _spPageContextInfo.webAbsoluteUrl in the console, gives the same domain you are using in the address bar?

1 answer

3

Use dataType: "JSONP" in your ajax call! This will include the header required for cross Domain requests. Please note that you must use a version of jQuery higher than 1.7

Browser other questions tagged

You are not signed in. Login or sign up in order to post.