Question

我们要求从多个SharePoint列表中检索数据并创建要在视图中显示的联接模型。我们有两个名单Employee和Department。员工列表的字段为＆＃34; Department＆＃34;需要与部门列表的标题字段

相结合

以下是控制器以及使用过的服务，但它没有按预期工作。

员工清单数据

[ { ＆＃34; Id＆＃34;：1，＆＃34;标题＆＃34;：＆＃34; 1＆＃34;，＆＃34;姓名＆＃34;：＆＃34; ABC＆＃34;，＆＃34;薪水＆＃34;：1000，＆＃34;部门＆＃34;：＆＃34; 1＆＃34;，＆＃34; ID＆＃34;：1 }， { ＆＃34; Id＆＃34;：2，＆＃34;标题＆＃34;：＆＃34; 2＆＃34;，＆＃34;姓名＆＃34;：＆＃34; DEF＆＃34;，＆＃34;薪水＆＃34;：600，＆＃34;部门＆＃34;：＆＃34; 2＆＃34;，＆＃34; ID＆＃34;：2 }， { ＆＃34; Id＆＃34;：3，＆＃34;标题＆＃34;：＆＃34; 3＆＃34;，＆＃34;姓名＆＃34;：＆＃34; GHI＆＃34;，＆＃34;薪水＆＃34;：500，＆＃34;部门＆＃34;：＆＃34; 3＆＃34;，＆＃34; ID＆＃34;：3 } ]

部门列表数据

[ { ＆＃34; Id＆＃34;：1，＆＃34;标题＆＃34;：＆＃34; 1＆＃34;，＆＃34;姓名＆＃34;：＆＃34; DOC＆＃34;，＆＃34;位置＆＃34;：＆＃34; DIJ＆＃34;，＆＃34; ID＆＃34;：1 }， { ＆＃34; Id＆＃34;：2，＆＃34;标题＆＃34;：＆＃34; 2＆＃34;，＆＃34;姓名＆＃34;：＆＃34; DYU＆＃34;，＆＃34;位置＆＃34;：＆＃34; RTY＆＃34;，＆＃34; ID＆＃34;：2 }， { ＆＃34; Id＆＃34;：3，＆＃34;标题＆＃34;：＆＃34; 3＆＃34;，＆＃34;姓名＆＃34;：＆＃34; UCV＆＃34;，＆＃34;位置＆＃34;：＆＃34; TYU＆＃34;，＆＃34; ID＆＃34;：3 } ]

我收到了一些[ngRepeat：dupes]错误。

(function () {
    angular.module("app")
            .controller('homeCtrl', ['$scope', 'employeeService', 'departmentService', function ($scope, employeeService, departmentService) {
                var employeevm = {};
                var employeesvm = [];
                employeeService.getAll()
                .then(function (response) {
                    $scope.employees = response.d.results;
                    for (var i = 0; i < $scope.employees.length; i++) {
                        employeevm.Id = $scope.employees[i].Title;
                        employeevm.Name = $scope.employees[i].Name;
                        employeevm.Salary = $scope.employees[i].Salary;
                        departmentService.getItem($scope.employees[i].Department)
                        .then(function (response) {
                            $scope.department = response.d.results;
                            employeevm.DepartmentName = $scope.department[0].Name;
                            employeevm.Location = $scope.department[0].Location;

                            employeesvm.push(employeevm);
                        })
                    }
                    $scope.employeesvm = employeesvm;
                })
            }]);
})();

EmployeeService.js

"use strict";
(function () {
    angular.module("app")
    .factory("employeeService", ["baseSpServices", function (baseService) {
        var listEndPoint = '/_api/web/lists';
        var getAll = function () {
            var query = listEndPoint + "/GetByTitle('Employee')/Items?$select=ID,Title,Name,Salary,Department";
            return baseService.getRequest(query);
        };
        return {
            getAll: getAll,
        };
    }]);
})();

departmentService.js

"use strict";
(function () {
    angular.module("app")
    .factory("departmentService", ["baseSpServices", function (baseService) {
        var listEndPoint = '/_api/web/lists';
        var getItem = function (id) {
            var query = listEndPoint + "/GetByTitle('Department')/Items?$select=ID,Title,Name,Location&$filter=Title eq " + id;
            return baseService.getRequest(query);
        }
        return {
            getItem: getItem
        };
    }]);
})();

baseSPService.js

"use strict";
(function () {
    angular.module("app")
        .factory("baseSpServices", ["$http", "$q", "spContext", function ($http, $q, spContext) {
            var baseUrl = _spPageContextInfo.siteAbsoluteUrl;
            var getRequest = function (query) {
                var deferred = $q.defer();
                $http({
                    url: baseUrl + query,
                    method: "GET",
                    headers: {
                        "accept": "application/json;odata=verbose",
                        "content-Type": "application/json;odata=verbose"
                    }
                })
                    .success(function (result) {
                        deferred.resolve(result);
                    })
                    .error(function (result, status) {
                        deferred.reject(status);
                    });
                return deferred.promise;
            };
            var postRequest = function (data, url) {
                var deferred = $q.defer();
                $http({
                    url: baseUrl + url,
                    method: "POST",
                    headers: {
                        "accept": "application/json;odata=verbose",
                        "X-RequestDigest": document.getElementById("__REQUESTDIGEST").value,
                        "content-Type": "application/json;odata=verbose"
                    },
                    data: JSON.stringify(data)
                })
                    .success(function (result) {
                        deferred.resolve(result);
                    })
                    .error(function (result, status) {
                        deferred.reject(status);
                    });
                return deferred.promise;
            };
            var updateRequest = function (data, url) {
                var deferred = $q.defer();
                $http({
                    url: baseUrl + url,
                    method: "PATCH",
                    headers: {
                        "accept": "application/json;odata=verbose",
                        "X-RequestDigest": document.getElementById("__REQUESTDIGEST").value,
                        "content-Type": "application/json;odata=verbose",
                        "X-Http-Method": "PATCH",
                        "If-Match": "*"
                    },
                    data: JSON.stringify(data)
                })
                    .success(function (result) {
                        deferred.resolve(result);
                    })
                    .error(function (result, status) {
                        deferred.reject(status);
                    });
                return deferred.promise;
            };
            var deleteRequest = function (url) {
                var deferred = $q.defer();
                $http({
                    url: baseUrl + url,
                    method: "DELETE",
                    headers: {
                        "accept": "application/json;odata=verbose",
                        "X-RequestDigest": document.getElementById("__REQUESTDIGEST").value,
                        "IF-MATCH": "*"
                    }
                })
                    .success(function (result) {
                        deferred.resolve(result);
                    })
                    .error(function (result, status) {
                        deferred.reject(status);
                    });
                return deferred.promise;
            };
            return {
                getRequest: getRequest,
                postRequest: postRequest,
                updateRequest: updateRequest,
                deleteRequest: deleteRequest
            };
        }]);
})();

Answer 1

您没有提供有关确切无法按预期工作的信息。

只需查看您的代码，您的嵌套then就会出现问题。您将response.d.results分配给$scope.department，然后从$scope.department读取值并将其分配给employeevm的属性。问题是嵌套的then会多次运行，因此分配给$scope.department的值会随着时间的推移而发生变化。

我建议不要向$scope.department分配任何内容，而只是直接使用响应，如下所示：

.then(function (response) {
    employeevm.DepartmentName = response.d.results[0].Name;
    employeevm.Location = response.d.results[0].Location;
    employeesvm.push(employeevm);
}

如果不是问题，请提供更多有关哪些内容无效的信息。

Answer 2

我已经修改了我的控制器，如下所示。我很确定问题在于处理承诺。任何有关处理错误和其他性能改进的帮助都非常有用

(function () {
    angular.module("app")
            .controller('homeCtrl', ['$filter', '$scope', '$q', 'employeeService', 'departmentService', function ($filter, $scope, $q, employeeService, departmentService) {

                var departments = [];
                var employeesvm = [];

                employeeService.getAll()
                    .then(function (employees) {
                        var promises = [];
                        $scope.employees = employees.d.results;
                        angular.forEach($scope.employees, function (employee) {
                            promises.push(departmentService.getItem(employee.Department));
                        })
                        $q.all(promises).then(function (responses) {
                            departments = [];
                            angular.forEach(responses, function (response) {
                                departments.push(response.d.results[0]);
                            })

                            for (var i = 0; i < $scope.employees.length; i++) {
                                var employeevm = {};

                                employeevm.Id = $scope.employees[i].Title;
                                employeevm.Name = $scope.employees[i].Name;
                                employeevm.Salary = $scope.employees[i].Salary;
                                var department = $filter('filter')(departments, { Title: $scope.employees[i].Department });
                                employeevm.DepartmentName = department[0].Name;
                                employeevm.Location = department[0].Location;

                                employeesvm.push(employeevm);
                            }

                            $scope.employeesvm = employeesvm;
                        })
                    })


            }]);
})();

Angular JS - 对SharePoint列表的嵌套http调用

2 个答案: