angularjs:将json数据从服务返回到控制器

时间:2013-09-09 18:32:15

标签: angularjs xmlhttprequest

我正在使用带有spring mvc的angular js来开发一个Web应用程序。

它正在点击spring mvc rest服务并将数据带到angular js服务,但我无法在服务中看到相同的数据。

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 = {};
});

我可以使用forEach循环在服务中打印所有数据。但是在控制器中它显示空对象数组Object {}

firebug控制台中没有错误。我正在使用POST方法。如果需要任何其他代码,请告诉我。

1 个答案:

答案 0 :(得分:16)

不确定。试试这段代码

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 - 作为与对象交互的接口,该对象表示异步执行的操作的结果,   并且可能会或可能不会在任何给定的时间点完成。