2017-07-15 2 views
1

J'essaie d'utiliser md-autocomplete avec $ http(), je peux voir les valeurs dans la console, mais je ne peux pas afficher les données retournées par la requête api à la saisie semi-automatique. J'ai essayé d'utiliser le mot clé return pour renvoyer des valeurs stockées dans le tableau JSON.Comment remplir la liste déroulante md-autocomplete?

 <md-autocomplete 
      md-autoselect=true 
      placeholder="Search for films" 
      md-items="item in querySearch(searchText)" 
      md-item-text="item.title" 
      md-min-length="2" 
      md-search-text="searchText" 
      md-selected-item="selectedItem"> 
     <md-item-template> 
      <span class="films-title"> 
      <span md-highlight-flags="^i" md-highlight-text="searchText"> 
       {{item.title}} 
      </span> 
      </span> 
     </md-item-template> 
     <md-not-found> 
      No match found. 
     </md-not-found> 
     </md-autocomplete> 

Les données que je veux afficher est stocké dans un tableau JSON et le contenu peut être vu dans la console:

'use strict'; 

filmApp.controller('SearchController',function ($scope, $http){ 
    $scope.results = { 
     values: [] 
    }; 

    $scope.querySearch = function (query) { 
    $http({ 
     url: 'https://api.themoviedb.org/3/search/movie?include_adult=false&page=1', 
     method: 'GET', 
     params: { 
       'query': query, 
       'api_key': apiKey 
     } 
     }).success(function (data, status) { 

      for (var i = 0; i < data.results.length; i++) { 
     $scope.results.values.push({title: data.results[i].original_title}); 

        console.log($scope.results.values);  
        return $scope.results.values; 

       } 
       console.log("STATUS: "+status); 

      }).error(function (error) { 
       console.log("ERROR: "+error); 
      }); 
     }; 
    }); 

Répondre

2

méthode querySearch doit retourner une promesse & du promise.then vous devriez retournerez une donnée Donc, dans votre cas vous avez utilisé .success/.error callbacks (pensé qu'ils sont déjà dépréciés) qui est la promesse d'être désavouer le retour de votre méthode querySearch

$scope.querySearch = function (query) { 
    return $http.get('https://api.themoviedb.org/3/search/movie?include_adult=false&page=1', { 
     params: { 
      'query': query, 
      'api_key': apiKey 
     } 
    }).then(function (data, status) { 
     var data= response.data; 
     for (var i = 0; i < data.results.length; i++) { 
      $scope.results.values.push({title: data.results[i].original_title}); 
      console.log($scope.results.values);  
     } 
     return $scope.results.values; 
    }) 
}; 
+0

Merci Pankaj, semble fonctionner. Je ne savais pas que les rappels .success/.error empêchaient la promesse d'être retournée, et ne savaient pas non plus qu'ils étaient obsolètes –

+0

@YacubAli Content de savoir que cela a fonctionné pour vous, merci :) –