javascript - AngularJS - ForEach 不循环

Question

问题

---

我有一个 AngularJS 应用程序，但出于某种原因，我的一个 forEach 循环无法正常工作。当单击按钮上的函数但在初始加载时它不工作时，循环似乎可以工作。

代码

---

所以我已经为页面正确设置了我的 Controller 。我在我的服务中调用一个函数，该函数触发我的 API 并返回一个数组:

Controller

var holidaysnew = getUserEventsById.getUserEventsById();

服务

app.service('getUserEventsById', function ($http) {  

this.getUserEventsById = function () {
    var holidays = [];


    $http.get("http://localhost:9847/AceTracker.svc/GetAllEventsByUser?user_id=1").success(function (data) {
        for (var key in data.GetAllEventsByUserResult) {
            if (data.GetAllEventsByUserResult.hasOwnProperty(key)) {
                holidays.push(data.GetAllEventsByUserResult[key])
            }
        }
    });
    return holidays;
};
});

因此在初始页面加载时 holidaysnew 被成功命中并且是一个假期数组。该行下方是我的 forEach 循环所在的位置，我想遍历 holidaysnew 但它似乎没有进入循环。

循环代码如下:

holidaysnew.forEach(function (hol) {
    $scope.eventSources[0].events.push({
        end: $filter('dateFilter')(hol.HOLIDAY_END),
        start: $filter('dateFilter')(hol.HOLIDAY_START),
        title: hol.HOLIDAY_TITLE,
        color: $filter('colorEventFilter')(hol.HOLIDAY_EVENT_STATE_ID)
    });
});

我有 console.log holidaysnew 数组，它肯定会被填充。谁能看到这个问题？

编辑:

服务似乎没问题，并按预期返回数组(见下文)

但是当 $scope.eventSources[0].events = holidayEvents; 代码运行时，它实际上似乎并没有设置事件。

holidayEvents 是数组吗？

编辑2:

这是返回给服务的 JSON 示例:

{"GetAllEventsByUserResult":[{"HOLIDAY_END":"\/Date(1456358400000+0000)\/","HOLIDAY_EVENT_ID":1,"HOLIDAY_EVENT_STATE_ID":1,"HOLIDAY_START":"\/Date(1455926400000+0000)\/","HOLIDAY_TITLE":"Spain     ","USER_ID":1},{"HOLIDAY_END":"\/Date(1454371200000+0000)\/","HOLIDAY_EVENT_ID":2,"HOLIDAY_EVENT_STATE_ID":2,"HOLIDAY_START":"\/Date(1454284800000+0000)\/","HOLIDAY_TITLE":"Italy     ","USER_ID":1},{"HOLIDAY_END":"\/Date(1458000000000+0000)\/","HOLIDAY_EVENT_ID":3,"HOLIDAY_EVENT_STATE_ID":1,"HOLIDAY_START":"\/Date(1457568000000+0000)\/","HOLIDAY_TITLE":"Germany   ","USER_ID":1},{"HOLIDAY_END":"\/Date(1481068800000+0000)\/","HOLIDAY_EVENT_ID":4,"HOLIDAY_EVENT_STATE_ID":3,"HOLIDAY_START":"\/Date(1480896000000+0000)\/","HOLIDAY_TITLE":"England   ","USER_ID":1}]}

Answer 1

这看起来像是处理您的 REST 响应的错误。数组的填充发生在 return 语句之后，因为 REST 调用是异步的。尝试将不起作用的循环移动到它自己的函数中，然后在 REST 成功回调中调用该函数，或者返回一个 Promise 并在成功回调中解析它。

返回 promise :

app.service('getUserEventsById', function ($http, $q) {  

    this.getUserEventsById = function () {
        var deferred = $q.defer();
        var holidays = [];


        $http.get("http://localhost:9847/AceTracker.svc/GetAllEventsByUser?user_id=1").then(function (data) {
            for (var key in data.GetAllEventsByUserResult) {
                if (data.GetAllEventsByUserResult.hasOwnProperty(key)) {
                    holidays.push(data.GetAllEventsByUserResult[key])
                }
            }
            deferred.resolve(holidays);
        });
        return deferred.promise;
    };
});

循环 promise :

holidaysnew.then(function(holidays) {
    holidays.forEach(function (hol) {
        $scope.eventSources[0].events.push({
            end: $filter('dateFilter')(hol.HOLIDAY_END),
            start: $filter('dateFilter')(hol.HOLIDAY_START),
            title: hol.HOLIDAY_TITLE,
            color: $filter('colorEventFilter')(hol.HOLIDAY_EVENT_STATE_ID)
        });
    });
});