Angular 服务未过滤数据

Question

我正在使用 Angular 服务从 API 获取详细信息，我只想 return 匹配的项目。意思是，在我输入一些文本后，我将单击一个按钮，该按钮将调用 Controller 中的一个函数，该函数将调用 Service 以获取详细信息。

现在我的问题是 return 是整个列表而不是过滤后的列表，我已将过滤结果存储到一个数组中，我想 return 该数组 (foundItems).

这是我的代码

(function() {
angular.module('NarrowItDownApp',[])
.constant('url',"https://davids-restaurant.herokuapp.com/menu_items.json")
.controller('NarrowItDownController',['$scope','MenuSearchService',function($scope,MenuSearchService) {
    var items=this;
    items.searchitem="";
    items.getitems=function() {
        MenuSearchService.getMatchedMenuItems(items.searchitem).then(function(response) {
            this.found=response.data;
            console.log(this.found);
        })
        .catch(function(response) {
            this.found=response.data;
            console.log(this.found);
        });
    };
}])
.service('MenuSearchService',['$http','url',function($http,url) {
    var service=this;
    service.getMatchedMenuItems=function(searchitem)
    {
        var foundItems=[];
        var key;
        return $http.get(url).success(function(data) {
            for(var i=0;i<data.menu_items.length;i++)
            {
                var temp=data.menu_items[i];
                //Old method
                /*for(key in temp)
                {
                    if(temp.hasOwnProperty(key))
                    {
                        console.log(temp[key])
                    }
                }*/
                Object.keys(temp).forEach(function(items)
                {
                    if(searchitem==temp[items])
                    {
                        foundItems.push(temp);
                    }
                });
            };
            console.log(foundItems);
            return foundItems;
        })
        .error(function(data) {
            console.log('error');
            return data;
        });
        return foundItems;
    };
}]);
})();

Answer 1

你可以为此使用 promise Promise

(function() {
angular.module('NarrowItDownApp', [])
.constant('url', "https://davids-restaurant.herokuapp.com/menu_items.json")
.controller('NarrowItDownController', ['$scope', 'MenuSearchService', function($scope, MenuSearchService) {
    var items = this;
    items.searchitem = "";
    items.getitems = function() {
        MenuSearchService.getMatchedMenuItems(items.searchitem).then(function(data) {
                for (var i = 0; i < data.menu_items.length; i++) {
                    var temp = data.menu_items[i];
                    //Old method
                    /*for(key in temp)
                    {
                        if(temp.hasOwnProperty(key))
                        {
                            console.log(temp[key])
                        }
                    }*/
                    Object.keys(temp).forEach(function(items) {
                        if (searchitem == temp[items]) {
                            foundItems.push(temp);
                        }
                    });
                };

                this.found = foundItems);
                console.log(this.found);
            })
            .catch(function(response) {
                this.found = response.data;
                console.log(this.found);
            });
    };
}])
 .service('MenuSearchService', ['$http', 'url', function($http, url) {
    var service = this;
    service.getMatchedMenuItems = function(searchitem) {
        var foundItems = [];
        var key;
        return $http.get(url);            
    };
}]);
 })();

Answer 2

Now my problem, is that it returns the entire list not the filtered list, I have stored filter result into an array I want to return that array(foundItems).

服务 return 是整个列表的原因是 .success 和 .error 方法 ignore return值。请改用 .then 和 .catch。

service.getMatchedMenuItems=function(searchitem)
{
    var foundItems=[];
    var key;
    //return $http.get(url).success(function(data) {
    //USE .then method
    return $http.get(url).then(function(response) {
        var data = response.data;
        for(var i=0;i<data.menu_items.length;i++)
        {
            var temp=data.menu_items[i];
            Object.keys(temp).forEach(function(items)
            {
                if(searchitem==temp[items])
                {
                    foundItems.push(temp);
                }
            });
        };
        console.log(foundItems);
        return foundItems;
    })
    //.error(function(data) {
    //USE .catch method
    .catch(function(errorResponse) {
        console.log(errorResponse.status);
        //return data;
        //THROW to chain rejection
        throw errorResponse;
    });
    //return foundItems;
};

在拒绝处理程序中使用 throw statement 也很重要。否则，被拒绝的承诺将转换为成功的承诺。

有关详细信息，请参阅。

Angular 服务未过滤数据

Angular Service Not Filtering Data

javascript

angularjs

angularjs-service

angular-http

angular-promise