Why I am getting not a function error in angularjs?

Question

I am following this tutorial I've found at Stormpath.
I am trying to understand how AngularJS works, but I am failing to get the edit function (controller) running. I am always getting the type error:

TypeError: SearchService.fetch is not a function

Within its callstack it references EditController pointing at this line of code:

SearchService.fetch($stateParams.id, function (response) {

Here is the whole code of EditController:

(function () {
    'use strict';

    angular
        .module('myApp')
        .controller('EditController', EditController);

    EditController.$inject = ['SearchService', '$stateParams'];

    function EditController(SearchService, $stateParams) {
        var vm = this;

        SearchService.fetch($stateParams.id, function (response) {
            vm.person = response;
        });
    }


})();

However I have no clue what's wrong here. I am trying to compare this code with the code for SearchController - please see below,

(function () {
    'use strict';

    angular
        .module('myApp')
        .controller('SearchController', SearchController);

    SearchController.$inject = ['SearchService'];

    function SearchController(SearchService) {
        var vm = this;

    vm.search = function(){
            SearchService.query(vm.term, function (response) {
                var results = response.filter(function (item) {
                    return JSON.stringify(item).toLowerCase().includes(vm.term.toLowerCase());
                });
                vm.searchResults = results;
            });
    }
    }
})();

Here is the code for SearchService:

(function () {
    'use strict';

    angular
        .module('myApp')
        .factory('SearchService', SearchService);

    SearchService.$inject = ['$resource'];

    function SearchService($resource) {
        return $resource('/api/search/people.json');
    }

    SearchService.fetch = function (id, callback) {
       Search.query(function (response) {
          var results = response.filter(function (item) {
             return item.id === parseInt(id);
          });
          return callback(results[0]);
       });
    };

})();

Any piece of advice is appreciated, I've spent already couple of days trying out various things.

From seeing this code, we don't even know if SearchService is a service. (Where do you have fetch defined?) — ippi
– ippi, Commented Jun 13, 2017 at 7:20
as your error pointing that SearchService.fetch is not a function....that is not defined anywhere but your trying to use it....iam doubting that u need to giveSearchService.search instead of SearchService.fetch — Sa E Chowdary
– Sa E Chowdary, Commented Jun 13, 2017 at 7:22
Did you link the search.service.js to your html file. It must be link after your app.js file. — TinDora
– TinDora, Commented Jun 13, 2017 at 7:23
Hi @ivo, check whether you have defined fetch function for it. — Manveer Singh
– Manveer Singh, Commented Jun 13, 2017 at 7:28

Manikandan Velayutham · Accepted Answer · 2017-06-16 07:55:14Z

1

Make your search service like this..

The service factory function generates the single object or function that represents the service to the rest of the application. The object or function returned by the service is injected into any component (controller, service, filter or directive) that specifies a dependency on the service

https://docs.angularjs.org/guide/services

(function () {
'use strict';

angular.module('myApp')
    .factory('SearchService', SearchService);

SearchService.$inject = ['$resource'];

function SearchService($resource, $http) {
 var service = {};
 service.url = $resource('/api/search/people.json');
var req = {
 method: 'GET',
 url: 'http://example.com',
 headers: {
   'Content-Type': undefined
 },
 data: { test: 'test' }

}

 service.fetch = function (id, callback) {
 // $http.get('yourapi.json').then() you can try like this also
      return $http(req).then(function (response) {
      var results = response.filter(function (item) {
         return item.id === parseInt(id);
      });
      return callback(results[0]);
   });
};
    return service;
}   
})();

edited Jun 16, 2017 at 7:55

answered Jun 13, 2017 at 8:16

Manikandan Velayutham

2,2281 gold badge17 silver badges22 bronze badges

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

8 Comments

ivo Over a year ago

Thanks for your contribution and advice. I've tried it out as you wrote but now I am getting the error: TypeError: SearchService.query is not a function...

Manikandan Velayutham Over a year ago

Search.query ? Search is service? did u inject?

ivo Over a year ago

Well, I did not make any changes within SearchController; I've just replaced the original code with the one you wrote within your answer.

Manikandan Velayutham Over a year ago

I'm asking in service. Search also service, right? where is search service code.

ivo Over a year ago

I am afraid I am lost here. The only thing I did after your answer was I replaced the code within SearchService with the one you provided. The original code for SearchService is in my question.

|

Collectives™ on Stack Overflow

Why I am getting not a function error in angularjs?

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related