typeahead not able to fetch data from api angularjs

Question

this is my html code

<input type="text" ng-model="ngModelOptionsSelected" 
 placeholder="Enter Story Title"
 ng-model-options="modelOptions" 
 ng-change="onChangeFunction()"
 typeahead-on-select="typeaheadOnSelectFunction()"
 uib-typeahead="document as document.Name for document in getStory($viewValue)" 
 class="form-control">

this is my .js code

$scope.getStory = function (val) {
storyService.GetStoryByName(cacheService.project.projectId,val).success(function (data) {
                if (data.ResponseStatus) {
               debugger;
                    return  data.ResponseData;
                } else {
                    //On failure
                    toastr.error(data.ErrorData.Error);
                }
            });
        };

function output which returns data like ResponseData =

[{"Id":211380.0,"Name":"dixit"},{"Id":211488.0,"Name":"dixit ade"},{"Id":251541.0,"Name":"dixit"},{"Id":842671.0,"Name":"dixit"},{"Id":842672.0,"Name":"dixit choksi"}]

but i am not able to bind data in typeahead.

please help me i am stuck. thanks

Could you share the console errors?

Ritwik Sen
– Ritwik Sen

2016-10-14 15:00:15 +00:00
Commented Oct 14, 2016 at 15:00 — Ritwik Sen
– Ritwik Sen, Commented Oct 14, 2016 at 15:00
@Ritwik Sen no error on consol.

Dixit
– Dixit

2016-10-15 04:54:55 +00:00
Commented Oct 15, 2016 at 4:54 — Dixit
– Dixit, Commented Oct 15, 2016 at 4:54

Ankh · Accepted Answer · 2016-10-14 15:00:44Z

1

Your function $scope.getStory() doesn't actually return anything, your return line return data.ResponseData; is nested within another function.

The uib-typeahead directive is able to work with promises so you just need to return the promise from your function.

$scope.getStory = function (val)
{
    return storyService.GetStoryByName(cacheService.project.projectId, val).success(function (data)
    {
        if (data.ResponseStatus)
            return data.ResponseData;

        toastr.error(data.ErrorData.Error);

        return [];
    });
};

You can also add another property to the directive, typeahead-loading="isLoading", that will toggle whilst the promise resolves. It can be used to show/hide loading spinners for example!

answered Oct 14, 2016 at 15:00

Ankh

5,7583 gold badges43 silver badges43 bronze badges

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

Collectives™ on Stack Overflow

typeahead not able to fetch data from api angularjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related