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?](http://stackoverflow.com/questions/15930339/how-to-tie-angular-uis-typeahead-with-a-server-via-http-for-server-side-optimi) — pkozlowski.opensource, Oct 17 '13 at 16:10

score 1 · Accepted Answer · edited May 23 '17 at 11:59

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 '17 at 11:59

Community

1
1

answered Oct 17 '13 at 16:10

pkozlowski.opensource

117,202
60
326
286

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? – EasterBunnyBugSmasher Mar 21 '15 at 20:23
@EasterBunnyBugSmasher apparently they are quite different. According to https://github.com/angular/angular.js/issues/10508 `success` and `error` return the original promise of `get`, while `then` returns a new promise. – user247702 Dec 01 '15 at 15:28

angular ui typeahead data over http rest service

1 Answers1