Return every single data, not just the typed one

Question

I'm using ui.bootstrap typeahead as

uib-typeahead="search as search.name for search in vm.searching($viewValue)"

getting data via $http.get from database

vm.searching = function() {
      return $http.get('http://localhost:3000/api/allcoaches')
      .then(function(response) {
        return response.data;       
    }); 
};

The search directive look like this

.component('searchbox',{
    restrict: 'E',
    templateUrl: '/common/searchbox/searchbox.template.html',
    bindings: {
        text: '<'
    },
    controller: 'SearchBoxController',
    controllerAs: 'vm'
});

response.data

[{"_id":"57bc46dafd7aac680c908072","name":"a","price":3},
{"_id":"57bc46dcfd7aac680c908073","name":"b","price":4},
{"_id":"57bc46f9207a745c2494182c","name":"c","price":5},
{"_id":"57bc4771207a745c2494182d","name":"d","price":6}]

It simply turned to show every single object in data, not just what typed in the searchbox. Like whenI typed 'a' , it returning all 'a,b,c,d' in dropdown. What I did wrong?

Answer 1

You are not doing any filtering in the service, you are getting API/allcoaches. Pass the keyed-in value to service and get the filtered result or do the filtering in your controller.

If you are doing in-memory filtering in your controller,then you don't need to hit the service everytime. You can get all coaches once (outside this method) and then do a $filter in this method.

But I would suggest that you do the filtering in your api and return the filtered list.

Again the decision to make the filtering in client side or in api depends upon your business scenario. In case there are too many coaches in your database, then go for filtering in api. If the amount of data is less, then get all coaches by hitting the api, keep that list in one of the view model properties and then filter from that in-memory list.