AngularJS + Sharepoint + Rest API

4

Personally I am currently trying to develop a script inside sharepoint using the Script Editor but it is falling into the error of my code, as if the connection was not correct, however, in the Dev Http google the rest request works. Here is the code:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script><scriptsrc="http://code.jquery.com/jquery-latest.min.js"></script>
<div ng-app>
    <b>Welcome to AngularJS world in SharePoint 2013!</b>
    <div ng-controller="MyController" class="ng-scope">
        <div ng-repeat="p in Products">
            <table style="background-color:#f07432">
                <tr><td align="center"><b>Product Name: {{p.ProductName}}</b> </td></tr>
                <tr><td align="center"><img ng-src={{p.ProductImage}} /> </td></tr>
                <tr><td align="center"><b> Rate: Rs. {{p.ProductRate}}.</b></td></tr>
            </table>
            <hr />
        </div>
    </div>
</div>
<script type="text/javascript">
    function MyController($scope) {
        $scope.loadREST = function () {
            jQuery.ajax({
                url: _spPageContextInfo.webServerRelativeUrl + "/_api/web/lists/getbytitle('ProductList')/items?$select=ProductName,ProductRate,ProductImage",
                type: "GET",
                headers: { "Accept": "application/json;odata=verbose" },
                success: function (data) {
                    var newData = [];
                    jQuery.each(data.d.results, function (index, value) {
                        var pImage = value.ProductImage;
                        prImage = pImage.substring(0, pImage.indexOf(','));
                        newData.push({ ProductName: value.ProductName, ProductRate: value.ProductRate, ProductImage: prImage });
                    });
                    $scope.$apply(function () {
                        $scope.Products = newData;
                    });
                },
                error: function () {
                    alert("error");
                }
            });
        };
        $scope.loadREST();
    }
</script>
    
asked by anonymous 14.02.2014 / 17:54

2 answers

1

If you are entering the error condition, this means that there was a problem with the HTTP request made via Ajax.

In the code shown, the variable _spPageContextInfo is not defined, but is used:

url: _spPageContextInfo.webServerRelativeUrl + "/_api/web/lists/getbytitle('ProductList')/items?$select=ProductName,ProductRate,ProductImage",

Make sure the URL actually contains the correct address.

I recommend utlize or Firebug in Firefox or the Developer Tools in Chrome.

With Chrome, it's easy to analyze all the details of an HTTP request. Type SHIFT+CTRL+I , click the " Network " tab, reload your page and observe the results - your jQuery HTTP call via Ajax should appear. Then, right-click on the HTTP call that appeared in the list, then click " Copy All as HAR " - and then paste the result here in the question as it will contain all the details of the HTTP call that is failing.

    
14.02.2014 / 18:18
0

Try changing the:

url: _spPageContextInfo.webServerRelativeUrl + "/_api/web/lists/getbytitle('....

To:

url: _spPageContextInfo.webAbsoluteUrl+"/_api/web/lists/getByTitle('....
    
16.02.2018 / 20:39