Angular Service不過濾數據

Question

我使用Angular Service從API中獲取細節，我只想返回匹配項。意思是，在我鍵入一些文本後，我將點擊一個按鈕，這將調用控制器中的一個函數，該函數將調用服務以獲取詳細信息。

現在我的問題是，它返回整個列表而不是過濾列表，我已經將過濾結果存儲到一個數組中，我想返回該數組（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);    
    }; 
}]); 
})();