angularjs: returning json data from service to controller

Question

I am using angular js with spring mvc to develop a web application.

It is hitting the spring mvc rest service and bringing data to angular js service, but i am unable to see the same data in service.

controllers.js

app.controller('CustomersController', function($scope, customersService){

init();
function init(){
    var data =customersService.getCustomers();
    $scope.customers = data;
}

$scope.insertCustomer = function(){
    var firstName = $scope.newCustomer.firstName;
    var lastName = $scope.newCustomer.lastName;
    var city = $scope.newCustomer.city;
    customersService.insertCustomer(firstName, lastName, city);
    $scope.newCustomer.firstName = '';
    $scope.newCustomer.lastName = '';
    $scope.newCustomer.city = '';
};

$scope.deleteCustomer = function(id){
    customersService.deleteCustomer(id);
};
});

app.controller('NavbarController', function ($scope, $location) {
    $scope.getClass = function (path) {
        if ($location.path().substr(0, path.length) == path) {
            return true;
        } else {
            return false;
        }
    };
});

customersService.js

app.service('customersService', function($http, $log) {

this.getCustomers = function() {
    $http({
        method : 'POST',
        url : '/CustomerManagementApp/customers/all'
    }).success(function(data, status, headers, config) {
        $log.log('Done');
        angular.forEach(data, function(c) {
            $log.log(c.firstName);
        });
        customers = data;
        return customers;
    });     
};

this.insertCustomer = function(firstName, lastName, city) {
    var topID = customers.length + 1;
    customers.push({
        id : topID,
        firstName : firstName,
        lastName : lastName,
        city : city
    });
};

this.getCustomer = function(id) {

};

this.deleteCustomer = function(id) {

};

var customers = {};
});

I am able to print all data using forEach loop in service. But in the controller it shows empty object array Object { }

There is no error in firebug console. I am using POST method. Do let me know if any other piece of code is required.

make this.getCustomers return a promise and use .then to chain it in the init(). — zs2020
– zs2020, Commented Sep 9, 2013 at 18:44
@sza: I am very new to angular js... can you please elaborate it little more and post it in the ans, so I can mark it? — Priyank Thakkar
– Priyank Thakkar, Commented Sep 9, 2013 at 18:46

zs2020 · Accepted Answer · 2013-09-09 19:06:05Z

16

Sure. Try this code

function init(){
    customersService.getCustomers().then(function(response){
        $scope.customers = response.data;
    });
}

this.getCustomers = function() {
    var promise = $http({
        method : 'POST',
        url : '/CustomerManagementApp/customers/all'
    }).success(function(data, status, headers, config) {
        $log.log('Done');
        angular.forEach(data, function(c) {
            $log.log(c.firstName);
        });
        customers = data;
        return customers;
    });    

    return promise; 
};

promise - as an interface for interacting with an object that represents the result of an action that is performed asynchronously, and may or may not be finished at any given point in time.

edited Sep 9, 2013 at 19:06

answered Sep 9, 2013 at 18:48

zs2020

54.7k30 gold badges157 silver badges223 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Priyank Thakkar Over a year ago

it worked. I just had to made data.data thanks a ton for insight of promise.

Collectives™ on Stack Overflow

angularjs: returning json data from service to controller

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related