javascript - 如何将数组从服务器复制到现有数组引用

Question

我一直在尝试使用 Angular JS 编写一个搜索引擎，但我无法将一个数组复制到另一个数组。当我启动代码时(在 q.all then 函数的 service.FoundItems 中)新数组(foundArray)显示为空数组。我搜索了如何将一个数组复制到另一个数组并尝试了该方法，如您所见，但它不起作用。请帮忙，这是代码，谢谢。

附注如果您需要 html，请告诉我。

(function () {
    'use strict';

    angular.module('narrowDownMenuApp', [])
        .controller('narrowItDownController', narrowItDownController)
        .service('MenuSearchService', MenuSearchService)
        .directive('searchResult', searchResultDirective);

    function searchResultDirective() {
        var ddo = {
            templateUrl: 'searchResult.html',
            scope: {
                items: '<'
            },
        };

        return ddo
    }

    narrowItDownController.$inject = ['MenuSearchService'];
    function narrowItDownController(MenuSearchService) {
        var menu = this;
        menu.input = "";
        menu.displayResult = [];
        menu.searchX = function(name) {
            menu.displayResult = MenuSearchService.FoundItems(menu.input, name);
            console.log(menu.displayResult);
        };
    }

    MenuSearchService.$inject = ['$http', '$q'];
    function MenuSearchService($http, $q) {
        var service = this;
        service.getMatchedMenuItems = function(name, searchTerm) {
            var deferred = $q.defer();
            var foundItems = [];
            var result =  $http({
                method: "GET",
                url: ('https://davids-restaurant.herokuapp.com/menu_items.json'),
                params: {
                    category: name
                }
            }).then(function (result) {
                var items = result.data;
                for (var i = 0; i < items.menu_items.length; i++) {
                    if (searchTerm === ""){
                        deferred.reject("Please enter search term");
                        i = items.menu_items.length;
                    }
                    else if (items.menu_items[i].name.toLowerCase().indexOf(searchTerm.toLowerCase()) ==! -1){
                        foundItems.push(items.menu_items[i].name)
                        deferred.resolve(foundItems);
                    }else {
                        console.log("doesn't match search");
                    }
                }
            });

            return deferred.promise;
        };
        service.FoundItems = function (searchTerm, name) {
            var searchResult = service.getMatchedMenuItems(name, searchTerm);
            var foundArray = [];
            $q.all([searchResult])
                .then(function (foundItems) {
                    foundArray = foundItems[0].slice(0);
                    foundArray.reverse();
                })
                .catch(function (errorResponse) {
                    foundArray.push(errorResponse);
                });
            console.log(foundArray);
            return foundArray;
        };
    };
})();

Answer 1

如果 service.FoundItems 函数的目标是返回对稍后用服务器结果填充的数组的引用，请使用 angular.copy将新数组从服务器复制到现有数组:

service.FoundItems = function (searchTerm, name) {
    var foundArray = [];
    var searchPromise = service.getMatchedMenuItems(name, searchTerm);
    foundArray.$promise = searchPromise
      .then(function (foundItems) {
        angular.copy(foundItems, foundArray);
        foundArray.reverse();
        return foundArray;
    })
      .catch(function (errorResponse) {
        return $q.reject(errorResponse);
    })
      .finally(function() {
        console.log(foundArray);
    });
    return foundArray;
}; 

我建议将 Promise 作为名为 $promise 的属性附加到数组引用，以便它可以用于 chain依赖于服务器结果的函数。

坦率地说，我不建议设计返回稍后用结果填充的数组引用的服务。如果你坚持这样设计，那就是这样的。

<小时/>

I tried the $promise thing that you recommended. I was wondering how you would get the value from it ie the array.

在 Controller 中，使用$promise的.then方法查看数组的最终值:

narrowItDownController.$inject = ['MenuSearchService'];
function narrowItDownController(MenuSearchService) {
    var menu = this;
    menu.input = "";
    menu.displayResult = [];
    menu.searchX = function(name) {
        menu.displayResult = MenuSearchService.FoundItems(menu.input, name);
        ̶c̶o̶n̶s̶o̶l̶e̶.̶l̶o̶g̶(̶m̶e̶n̶u̶.̶d̶i̶s̶p̶l̶a̶y̶R̶e̶s̶u̶l̶t̶)̶;̶ 

        menu.displayResult.$promise
          .then(function(foundArray) {
            console.log(foundArray);
            console.log(menu.displayResult);
        }).catch(function(errorResponse) {
            console.log("ERROR");
            console.log(errorResponse);
        });
    };
}

要查看最终结果，需要将 console.log 移至 Promise 的 .then block 内。