javascript - AngularJS - 访问服务对象的 JS 对象名称/值对时出现类型错误

Question

为什么表达式 databaseService[user1Constant].accountBalance 会产生以下错误？

angularJsApplicationController.js:

app.controller("angularJsController", function ($scope, $location, $http, user1Constant, user2Constant, databaseService) {
    databaseService[user1Constant+'Request'].done(function(){
        console.log(JSON.stringify(databaseService));
        console.log(user1Constant);
        console.log(databaseService);
        console.log(databaseService[user1Constant]);
        console.log(databaseService[user1Constant].accountBalance);
    });
});

这是我创建对象的代码:angularJsApplication.js:

app.service("databaseService", ["user1Constant","user2Constant", function (user1Constant, user2Constant) {
    var returnObject = {};
    returnObject.updateAllEntriesUser = function (user) {

        //jQuery AJAX HTTP method
        $.post("getEntriesFromUser.php", {
            user: user
        })
            .done(function (response) {
                response = JSON.parse(response);
                returnObject[user]={};
                returnObject[user].bookings = response;
                var totalAmount = 0;
                for (var i = 0; i < response.length; i++) {
                    totalAmount += parseFloat(response[i].amount_before_comma + '.' + response[i].amount_after_comma);
                }
                returnObject[user].accountBalance = totalAmount;
            });
    };
    returnObject[user1Constant + 'Request'] = returnObject.updateAllEntriesUser(user1Constant);
    returnObject[user1Constant + 'Request'] = returnObject.updateAllEntriesUser(user2Constant);
    return returnObject;
}]);

Answer 1

控制台向您显示请求完成后当前的对象状态，这与您将其写入控制台时的状态不同。您的 Controller 试图在加载数据之前访问数据，这就是为什么您的用户数据没有您期望的属性。

您需要从您的服务返回一个 jQuery 延迟对象，然后将一个函数传递给它的 done 函数，这样您就可以等待数据加载完成。

或者你可以作弊并使用 $scope.$watch...

您可以将其更改为更灵活，但要使其以最少的更改工作:

app.service("databaseService", ["user1Constant","user2Constant", function (user1Constant, user2Constant) {
  var returnObject = {};
  returnObject.updateAllEntriesUser = function (user) {

    //jQuery AJAX HTTP method
    return $.post("getEntriesFromUser.php", {
        user: user
    })
        .done(function (response) {            
            response = JSON.parse(response);
            returnObject[user]={};
            returnObject[user].bookings = response;
            var totalAmount = 0;
            for (var i = 0; i < response.length; i++) {
                totalAmount += parseFloat(response[i].amount_before_comma + '.' + response[i].amount_after_comma);
            }
            returnObject[user].accountBalance = totalAmount;
        });
  }

  returnObject[user1Constant + 'Request'] = returnObject.updateAllEntriesUser(user1Constant);
  returnObject[user2Constant + 'Request'] = returnObject.updateAllEntriesUser(user2Constant);
  console.log(returnObject); //angularJsApplication.js:101
  return returnObject;
});

还有你的 Controller :

app.controller("angularJsController", function ($scope, $location, $http, user1Constant, user2Constant, databaseService) {
    databaseService[user1Constant + 'Request'].done(function() {
        /* Now I can get databaseService[user1Constant] */
    });
});