My goal with AngularJS is to create a service that retrieves a list of clients from a REST API and make it available in a controller.
Despite successfully fetching the data using my service, I'm struggling with passing the data to the controller. The service code below shows that the data is being retrieved correctly:
app.service('clientsService', ['$http', function ($http) {
var serviceBase = 'http://localhost:56879/api/';
this.getClients = function () {
return $http.get(serviceBase + 'clients').then(function (results) {
console.log(results.data);
return results.data;
});
};
}]);
When attempting to use this data in a controller, however, I encounter issues. The following controller snippet does not populate this.clients effectively:
app.controller('clientsController', ['$scope', 'clientsService', function ($scope, clientsService) {
this.clients = clientsService.getClients();
console.log(this.clients);
}]);
The resulting output for this.clients seems to indicate a try-catch block rather than the expected data:
Object {then: function, catch: function, finally: function}
catch: function (a){return this.then(null,
finally: function (a){function b(a,c){var d=e();c?d.resolve(a):d.reject(a);return d.promise}function d(e,g){var f=null;try{f=(a||c)()}catch(h){return b(h,!1)}return f&&P(f.then)?f.then(function(){return b(e,g)},function(a){return b(a,!1)}):b(e,g)}return this.then(function(a){return d(a,!0)},function(a){return d(a,!1)})}
then: function (b,g,h){var m=e(),u=function(d){try{m.resolve((P(b)?b:c)(d))}catch(e){m.reject(e),a(e)}},F=function(b){try{m.resolve((P(g)?g:d)(b))}catch(c){m.reject(c),a(c)}},v=function(b){try{m.notify((P(h)?h:c)(b))}catch(d){a(d)}};f?f.push([u,F,v]):k.then(u,F,v);return m.promise}
__proto__: Object
I'm currently uncertain where I've gone wrong in passing data from the service to the controller, and am seeking clarification on how to resolve this issue.