Question

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

现在我的问题是它返回整个列表而不是已过滤的列表，我已将过滤结果存储到我想要返回该数组的数组中（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

现在我的问题是它返回整个列表而不是已过滤的列表，我已将过滤结果存储到我想要返回该数组的数组中（foundItems）。

服务返回整个列表的原因是.success和.error方法忽略返回值。请改用.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 execution order with $q。

Answer 2

已更新

这种情况正在发生，因为你有一个异步回调函数，但仍然有一个返回它。因此，当您的服务被调用时，异步函数开始运行，但由于过早的返回调用，没有机会实现其回调。

此外，您没有从服务中返回承诺，但是您的方法调用有.then（）。

将您的服务方式更改为以下内容：

  .service('MenuSearchService',['$http','url',function($http,url) {
    var service=this;
    service.getMatchedMenuItems=function(searchitem)
    {
        return new Promise(function(resolve, reject){
            var foundItems=[];
            var key;

            $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);
                resolve(foundItems);
            })
            .error(function(data) {
                console.log('error');
                reject(data);
            });
       })        
    };
}]);

希望有效！

Answer 3

您可以使用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);            
    };
}]);
 })();

角度服务不过滤数据

3 个答案: