Material: md-autocomplete : $http promise fails to work

Created on 5 Mar 2015 · 7Comments · Source: angular/material

When the items are returned from an $http promise the md-autocomplete fails to work.
From a $http promise the data items are returned as response.data. md-autocomplete expects the data is passed back as an array.
The array is contained in the response.data object but md-autocomplete is reading response as the array which fails.

$scope.loadSkillTags = function (query) {
    var data = {qData: query};
    return SkillService.querySkills(data);
};

<md-autocomplete
         md-selected-item="data.selectedItem"
         md-search-text="data.searchText"
         md-items="item in loadSkillTags(data.searchText)"
         md-item-text="item"
         placeholder="Talent">
     <span md-highlight-text="data.searchText">{{item.name}}</span>
 </md-autocomplete>

fixed enhancement

Source

kschwidder

Most helpful comment

Workaround is like this

$scope.loadSkillTags = function (query) {
   var data = {qData: query};
   return SkillService.querySkills(data).then(function(response) {
    return response.data;
   });
};

kschwidder on 5 Mar 2015

👍6 🎉1

All 7 comments

Workaround is like this

$scope.loadSkillTags = function (query) {
   var data = {qData: query};
   return SkillService.querySkills(data).then(function(response) {
    return response.data;
   });
};

kschwidder on 5 Mar 2015

👍6 🎉1

@robertmesserle - I think we should check the return value from the promise and check it is is the standard $http response object... just to add a little smarts to the component.

ThomasBurleson on 5 Mar 2015

Agreed, will add this when I get a chance.

robertmesserle on 6 Mar 2015

Great. Thx.

kschwidder on 6 Mar 2015

would be great if the docs get updated too
https://material.angularjs.org/latest/#/api/material.components.autocomplete/directive/mdAutocomplete

to support promises is a great thing and it's not mentioned in md-items

sombriks on 1 Sep 2015

md-autocomplete : $http promise never fails to work, it will work perfectly.

.then is a part of $http service

Kindly refer the post: Live code is available in the following post: http://stackoverflow.com/questions/35652828/http-issue-values-cant-be-returned-before-a-promise-is-resolved-in-angular-m

balamanigandan on 1 Mar 2016

-You can use Angularjs promises to get data from $http call.
    <body>
            <form name="searchForm" ng-submit="searchForm.$valid && submit()" novalidate>
                <md-autocomplete flex-gt-sm="35"
                            required md-input-name="autocompleteField" 
                            md-input-maxlength="80" 
                            md-selected-item="selectedItem"
                            md-search-text="formdata.searchText" 
                            md-items="item in querySearch(formdata.searchText)" 
                            md-item-text="item.display" 
                            md-min-length="0"
                            md-floating-label="Get Values">
                            <md-item-template>
                              <span md-highlight-text="formdata.searchText" md-highlight-flags="^i">{{item.display}}</span>
                            </md-item-template>
                            <md-not-found>
                              No data matching "{{formdata.searchText}}" were found.
                            </md-not-found>
                            <div ng-messages="searchForm.autocompleteField.$error" ng-if="searchForm.autocompleteField.$touched">
                              <div ng-message="required">Please <b>select</b> Pricing model id.</div>
                            </div>
                        </md-autocomplete>
            </form>
         </body>
    <script>
    var getdataList= getData().then(function(greeting) {
              $scope.getdataList = greeting;
        })
        $scope.querySearch = querySearch;
    function querySearch(query) {
            var results = query ? $scope.getdataList.filter(createFilterFor(query)): $scope.getdataList, deferred;
                return results;
            }
    function getData() {
            deferred = $q.defer();
            $http.get(url).then(function(response) {
                    var responseList = response.map(function (task) {
                        return {value: task.dataname, display:task.dataname}; 
                    });
                    deferred.resolve(responseList);
                },function myError() {
                    console.log("Error")
                });
            return deferred.promise;
        }
    function createFilterFor(query) {
                var lowercaseQuery = query.toLowerCase();
                  return function filterFn(state) {
                    var lowercaseState = state.value.toLowerCase();
                  return (lowercaseState.search(lowercaseQuery) >= 0);
                };
            }


    </script>