Ajax results not displayed using angularJS

Question

I'm trying to display a list of events after ajax callback using AngularJS

HTML:

<ul>
    <li ng-repeat="event in events">{{ event.content }}</li>
</ul>

CONTROLLER:

app.controller("myctrl", function ($scope, mySrv) {
    $scope.message = "";
    $scope.events = mySrv.getEvents(26);

});

SERVICE:

app.factory('mySrv', function ($http) {
    return {
        getEvents: function (i_RequestID) {

            $http({
                method: 'POST',
                url: '/Home/GetOptimizationResultEvents',
                data: { RequestID: i_RequestID }
            }).then(function successCallback(response) {
                return response.data;
            }, function errorCallback(response) {
                // called asynchronously if an error occurs
                // or server returns response with an error status.
            });
        }
    }
});

Now there are no errors but i see no results.. what am i dooing wrong here ?

Are you using angular with webAPI?

Hardik Gondalia
– Hardik Gondalia

2015-12-08 12:35:03 +00:00
Commented Dec 8, 2015 at 12:35 — Hardik Gondalia
– Hardik Gondalia, Commented Dec 8, 2015 at 12:35
you have to return the $http

koox00
– koox00

2015-12-08 12:35:06 +00:00
Commented Dec 8, 2015 at 12:35 — koox00
– koox00, Commented Dec 8, 2015 at 12:35

Pjetr · Accepted Answer · 2015-12-08 13:00:25Z

just like @koox00 said, you have to return the $http

app.factory('mySrv', function ($http) {
    return {
        getEvents: function (i_RequestID) {

            $http({
                method: 'POST',
                url: '/Home/GetOptimizationResultEvents',
                data: { RequestID: i_RequestID }
            });
        }
    }
});

Personally I prefer to transform my raw data in the factory

app.factory('mySrv', ['$q', '$http', function ($q, $http) {
    return {
        getEvents: function (i_RequestID) {
            return $q(function(resolve, reject) {
                $http({
                    method: 'POST',
                    url: '/Home/GetOptimizationResultEvents',
                    data: { RequestID: i_RequestID }
                })
                .then(function(response) {
                    var data = response.data;
                    // transforms

                    resolve(data);
                })
                .catch(function(reason) {
                    reject(reason);
                });
            });
        }
    }
}]);

Gustav · Accepted Answer · 2015-12-08 12:36:37Z

your getEvents-functions needs to return the promise of the call:

getEvents: function (i_RequestID) {

        return $http({
            method: 'POST',
            url: '/Home/GetOptimizationResultEvents',
            data: { RequestID: i_RequestID }
        }).then(function successCallback(response) {
            return response.data;
        }, function errorCallback(response) {
            // called asynchronously if an error occurs
            // or server returns response with an error status.
        });
    }

This will make getEvents return a promise, so where you use it you go like this:

app.controller("myctrl", function ($scope, mySrv) {
    $scope.message = "";

    mySrv.getEvents(26).then(function(result){
        $scope.events = result;
    });

});

you might need to do a $scope.$apply() after you assign $scope.events = result;

phayton · Accepted Answer · 2015-12-08 12:36:52Z

0

Just a stab in the dark, but have you tried returning the promise?

app.factory('mySrv', function ($http) {
    return {
        getEvents: function (i_RequestID) {

        return $http({
                method: 'POST',
                url: '/Home/GetOptimizationResultEvents',
                data: { RequestID: i_RequestID }
            }).then(function successCallback(response) {
                return response.data;
            }, function errorCallback(response) {
                // called asynchronously if an error occurs
                // or server returns response with an error status.
            });
        }
    }
});

answered Dec 8, 2015 at 12:36

phayton

1466 bronze badges

Comments

mugdha · Accepted Answer · 2015-12-08 12:35:24Z

-1

try this

     app.controller("myctrl",['$scope', 'mySrv', function ($scope, mySrv) {
           $scope.message = "";
           $scope.events = mySrv.getEvents(26);

    }]);

also check with controller and app script files properly loaded

answered Dec 8, 2015 at 12:35

mugdha

907 bronze badges

Collectives™ on Stack Overflow

Ajax results not displayed using angularJS

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related