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

Question

We have a requirement on retrieving data from multiple SharePoint lists and creating a joined model to be displayed in the view. We have two lists Employee and Department. Employee list would have field as "Department" which needs to be joined with Department List's Title Field

Below is the controller along with used services, but it is not working as expected.

Employee List data

[ { "Id": 1, "Title": "1", "Name": "ABC", "Salary": 1000, "Department": "1", "ID": 1 }, { "Id": 2, "Title": "2", "Name": "DEF", "Salary": 600, "Department": "2", "ID": 2 }, { "Id": 3, "Title": "3", "Name": "GHI", "Salary": 500, "Department": "3", "ID": 3 } ]

Department List data

[ { "Id": 1, "Title": "1", "Name": "DOC", "Location": "DIJ", "ID": 1 }, { "Id": 2, "Title": "2", "Name": "DYU", "Location": "RTY", "ID": 2 }, { "Id": 3, "Title": "3", "Name": "UCV", "Location": "TYU", "ID": 3 } ]

I am getting some [ngRepeat:dupes] error.

(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

You haven't provided much information about what exactly is not working as expected.

Just by viewing your code it looks like your nested then could be the problem. You assign response.d.results to $scope.department , then read values from $scope.department and assign them to properties of employeevm . The problem is that the nested then runs multiple times, so the value assigned to $scope.department is going to change over time.

I'd suggest not assigning anything to $scope.department at all but instead just use the response directly, as follows:

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

If that's not the problem please provide more information on what's not working.

Answer 2

I have modified my controller as below. I am pretty sure the issue was with handling the promises. Any help on handling error and other performance refinements is very much helpful

(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;
                        })
                    })


            }]);
})();