Can someone give me some assistance in converting this AJAX get list items to $http? Specifically I am trying to get the different fields to $scopes. I am aware that when doing $http now you can no longer use "success" and I pass in response.data but when I use angular.forEach and console.log the variables I am not getting anything in the console. I would much prefer to learn to do this the angular way without creating a service if possible.

$(document).ready(function getListItems() {

$.ajax({
    url: url + "/_api/web/lists/getByTitle('POST')/items?&$select=Post,Arena,Country,City",
    type: "GET",
    headers: { "Accept": "application/json;odata=verbose" },
    success: function (data) {
        $.each(data.d.results, function () {
        var arena = this.Arena;
            var post = this.Post;
            var city = this.City;
            var country = this.Country;
            console.log(post);
            console.log(arena);
            console.log(country)
            console.log(city)
        });
    },
    error: function (errorMsg) {
        console.log(errorMsg);
    }
});

});

Sample script for your reference.

var myAngApp = angular.module('myApp', []);
    myAngApp.controller('myController', function ($scope, $http) {
        $http({
            method: 'GET',
            url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('POST')/items?&$select=Post,Arena,Country,City",
            headers: { "Accept": "application/json;odata=verbose" }
        }).success(function (data, status, headers, config) {
            $scope.countries = data.d.results;
        }).error(function (data, status, headers, config) {

        });
    });

Update:

Below script works in my local.

<div ng-app="myApp" class="row">
        <div ng-controller="myController" class="span10">
            <table class="table">
                <tr>
                    <th>Title</th>                    
                </tr>
                <tr ng-repeat="country in countries">
                    <td>{{country.Title}}</td>
                </tr>
            </table>
        </div>
    </div>
    <script type="text/javascript" src="/SiteAssets/angular/angular.min.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script>
        var myAngApp = angular.module('myApp', []);
        myAngApp.controller('myController', function ($scope, $http) {
            $http({
                method: 'GET',
                url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('MyList3')/items?&$select=Title",
                headers: { "Accept": "application/json;odata=verbose" }
            }).success(function (data, status, headers, config) {
                $scope.countries = data.d.results;
            }).error(function (data, status, headers, config) {

            });
        });
    </script>
  • when I use this I get success is not a function in the console and to use then which requires me to use the response as a parameter for there I am having a hard time accessing the properties using angular.forEach – Joseph Cain Dec 7 at 20:15
  • Check my update. – Lee_MSFT Dec 10 at 1:39
  • "angular.js:14800 TypeError: $http(...).success is not a function at Object.<anonymous> (Angularjs test.aspx:184) at Object.invoke (angular.js:5106) at O.instance (angular.js:11076) at p (angular.js:9939) at f (angular.js:9248) at f (angular.js:9251) at angular.js:9113 at angular.js:1960 at m.$eval (angular.js:18542) at m.$apply (angular.js:18641)" This is the error that I am getting in the console. – Joseph Cain 2 days ago

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.