3

Angular controller result undefined after factory restful web api call. I’ve seen many posts about this but none seem to solve my problem. I have a controller that makes a restful web api2 call. Using fiddler I can see the call made and the 200 response but I can never seem to get the results, and I know the get is via async. Below is the factory and controller. I’ve also tried to explicitly send the callback into the factory as well, this approach leads to not even an undefined object result, just doesn’t work. I’m really at a standstill here and I’m new to Angularjs, what is wrong? Currently I have the controller call wired to a button for explicit testing.

**FACTORY NO EXPLICIT CALL-BACK** 
casenoteApp.factory('MyFactory', function ($http) {


var factory = {};

var urlBase = 'http://xxxxxx/api/Client';


factory.getClients = function (userLogin) {

    return $http.get(urlBase + '/' + userLogin);
};


return factory;
});

**CONTROLLER NO EXPLICIT CALL-BACK** 
casenoteApp.controller('MyController', MyController);

function MyController($scope, MyFactory) {


$scope.addCustomer = function () {

    MyFactory.getClients(123456)
       .success(function (clients) {

            var curCust = clients;
            $scope.status = clients.last_name;

        })
       .error(function (error) {
           $scope.status = 'Unable to load client data: ' + error.message;
       });        

}


}

**FACTORY PASSING IN CALL-BACK**
casenoteApp.factory('MyFactory', function ($http) {


var factory = {};

var urlBase = 'http://xxxxxx/api/Client';

factory.getClients = function (userLogin, callback) {

    return $http.get(urlBase + '/' + userLogin).success(callback)

}

return factory;
});


**CONTROLLER PASSING IN CALL-BACK**
casenoteApp.controller('MyController', MyController);

function MyController($scope, MyFactory) {


$scope.addCustomer = function () 



    MyFactory.getClients(123456, function(clients) {

            var curCust = clients[0];
            $scope.status = clients.last_name;
        })


}

}

1 Answer 1

6

Setup your factory to use .then and return the data, like so:

casenoteApp.factory('MyFactory', function ($http) {
    var urlBase = 'http://xxxxxx/api/Client';

    return {
        getClients: function (userLogin) {
            return $http.get(urlBase + '/' + userLogin).then(function(data) {
                return data.result;
            });
        }
    };
});

And your controller:

MyFactory.getClients(01234).then(function(data) {
    console.log(data); //hello data!
});
3
  • This leads to the same issue. The JSON returned looks fine: {"int_id":123456,"last_name":"Doe","first_name":"John","type":"FAM","sex":null,"birthdate":null in fiddler but in the console I get the following: XMLHttpRequest for xxxxxx/api/Client/192524 required Cross Origin Resource Sharing (CORS). The web service is on the same server but in a different virtual directory. This shouldn't require jsonp, correct? And if so, does this sound like the problem? Why would this error occur?
    – Aaron Lind
    Aug 8, 2014 at 15:24
  • Ok, had to clear the cobwebs. When I started this the angular visual studio project was running built in server, and the web services are hosted, so this caused cross origin problem. I've now re-hosted to IIS and I get the call back to my controller but the data returned is still undefined when posted to console.log.
    – Aaron Lind
    Aug 8, 2014 at 18:11
  • Ok, it works now. It should be .data, so for above data.data returns the results now. Thanks.
    – Aaron Lind
    Aug 8, 2014 at 19:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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