angular ui typeahead data over http rest service

Question

in my html I have

typeahead="name for name in search($viewValue)

My data returned from server is as expected. But I have now realised that as this is a async request, the return I am doing in multiple places in the code below are worthless, as they are not returning the data array so that the html code above can receive it.

        $scope.search = function (term) {
            return $http({
                method: 'GET',
                url: 'rest/search',
                params: {
                    term: term,
                    types: '21'
                }
            }).
            success(function (data, status, headers, config) {
                var Names = [];
                for (var i = 0; i < data.length; i++) {
                    Names.push(data[i].name);
                }
                console.log(Names);//as expected

                return Names;
            }).
            error(function (data, status, headers, config) {
                console.log(status);
            });

        };

How should I return the data from a async HTTP GET request in an array form so that my typeahead can use it.

Should I store in a data variable like this example on HTTP GET success https://stackoverflow.com/a/12513509/494461

but then how can I run the function as well use the storage variable in the array?

typeahead="name for name in search($viewValue)

or

typeahead="name for name in dataStoredInHTTPGetSucess

can I somehow combine the above two?

possible duplicate of How to tie angular-ui's typeahead with a server via $http for server side optimization? — pkozlowski.opensource
– pkozlowski.opensource, Commented Oct 17, 2013 at 16:10

Community · Accepted Answer · 2017-05-23 11:59:23Z

1

This is more or less duplicate of https://stackoverflow.com/a/15930592/1418796. What you need to do is to return a promise from your function, something along those lines:

$scope.search = function (term) {
        return $http({
            method: 'GET',
            url: 'rest/search',
            params: {
                term: term,
                types: '21'
            }
        }).
        then(function (response) {
            var names = [];
            for (var i = 0; i < response.data.length; i++) {
                names.push(response.data[i].name);
            }
            console.log(names);//as expected

            return names;
        });

    };

edited May 23, 2017 at 11:59

CommunityBot

11 silver badge

answered Oct 17, 2013 at 16:10

pkozlowski.opensource

117k60 gold badges329 silver badges286 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

EasterBunnyBugSmasher Over a year ago

I have trouble understanding how your code is any different than the original code. Is the "then" function so much different to the "success" function?

user247702 Over a year ago

@EasterBunnyBugSmasher apparently they are quite different. According to github.com/angular/angular.js/issues/10508 success and error return the original promise of get, while then returns a new promise.

Collectives™ on Stack Overflow

angular ui typeahead data over http rest service

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related