CODEWITHSUNDEEP
angularjs
Peter Boomsma
Peter Boomsma

Reputation: 9808

TypeError: Cannot read property 'jsonp' of undefined

I created a function that saves data in my database.

  $scope.addMovie = function() {

    'http://api.themoviedb.org/3/movie/206647?api_key=a8f7039633f2065942cd8a28d7cadad4&append_to_response=releases'
    // Search for release dates using the ID.
    var base = 'http://api.themoviedb.org/3/movie/';
    var movieID = $(event.currentTarget).parent().find('.movieID').text()
    var apiKey = 'a8f7039633f2065942cd8a28d7cadad4&query='
    var append_to_response = '&append_to_response=releases'
    var callback = 'JSON_CALLBACK'; // provided by angular.js
    var url = base + movieID + '?api_key=' + apiKey + append_to_response + '&callback=' + callback;

    $http.jsonp(url,{ cache: true}).
      success(function(data, status, headers, config) {

        if (status == 200) {

          $scope.movieListID = data;
          console.log($scope.movieListID);

          var releaseNL;

          for (var i = 0; i < $scope.movieListID.releases.countries.length; i++) {
            var release = $scope.movieListID.releases.countries[i];
            if (release['iso_3166_1'] == 'NL') {
                releaseNL = release;
            }
          }

          if(typeof releaseNL === 'undefined'){
            // With release date

            Notification($scope.movieListID.original_title + ' is toegevoegd, maar heeft nog geen Nederlandse premiere datum.');

            createMovie.create({
              title:          $scope.movieListID.original_title,
              release_date:   $scope.movieListID.release_date,
              image:          $scope.movieListID.poster_path,
              movie_id:       $scope.movieListID.id
            }).then(init);

          } else {
            Notification.success($scope.movieListID.original_title + ' is toegevoegd.');

            createMovie.create({
              title:          $scope.movieListID.original_title,
              release_date:   releaseNL.release_date,
              image:          $scope.movieListID.poster_path,
              movie_id:       $scope.movieListID.id
            }).then(init);
          };

        } else {
            console.error('Error happened while getting the movie list.')
        }
      })

      $(".search_results").fadeOut(250);

      $scope.searchquery = null
  };

I want to remove this code from my controller to service. So I created a "addMovieService.js"

(function(){
  "use strict";

  angular.module('addMovieseat')

  .factory('addMovie', [

    function($http, $q, $scope){
      return{
        add: function(){

          'http://api.themoviedb.org/3/movie/206647?api_key=a8f7039633f2065942cd8a28d7cadad4&append_to_response=releases'
          // Search for release dates using the ID.
          var base = 'http://api.themoviedb.org/3/movie/';
          var movieID = $(event.currentTarget).parent().find('.movieID').text()
          var apiKey = 'a8f7039633f2065942cd8a28d7cadad4&query='
          var append_to_response = '&append_to_response=releases'
          var callback = 'JSON_CALLBACK'; // provided by angular.js
          var url = base + movieID + '?api_key=' + apiKey + append_to_response + '&callback=' + callback;

          $http.jsonp(url,{ cache: true}).
            success(function(data, status, headers, config) {

              if (status == 200) {

                $scope.movieListID = data;
                console.log($scope.movieListID);

                var releaseNL;

                for (var i = 0; i < $scope.movieListID.releases.countries.length; i++) {
                  var release = $scope.movieListID.releases.countries[i];
                  if (release['iso_3166_1'] == 'NL') {
                      releaseNL = release;
                  }
                }

                if(typeof releaseNL === 'undefined'){
                  // With release date

                  Notification($scope.movieListID.original_title + ' is toegevoegd, maar heeft nog geen Nederlandse premiere datum.');

                  createMovie.create({
                    title:          $scope.movieListID.original_title,
                    release_date:   $scope.movieListID.release_date,
                    image:          $scope.movieListID.poster_path,
                    movie_id:       $scope.movieListID.id
                  }).then(init);

                } else {
                  Notification.success($scope.movieListID.original_title + ' is toegevoegd.');

                  createMovie.create({
                    title:          $scope.movieListID.original_title,
                    release_date:   releaseNL.release_date,
                    image:          $scope.movieListID.poster_path,
                    movie_id:       $scope.movieListID.id
                  }).then(init);
                };

              } else {
                  console.error('Error happened while getting the movie list.')
              }
            })

            $(".search_results").fadeOut(250);

            $scope.searchquery = null
        }
      }
  }])

})();

And in my controller I now have,

$scope.addMovie = function() {

  addMovie.add();

};

Now when I fire the addMovie function I get an error TypeError: Cannot read property 'jsonp' of undefined. Can someone explain what´s going wrong?

Upvotes: 1

Views: 1332

Answers (1)

pablochan
pablochan

Reputation: 5715

You're not injecting $http properly. You're using an array as the second argument in factory(...), but you're not giving it the names of the injected fields.

Possible fix:

angular.module('addMovieseat').factory('addMovie', ['$http', '$q', 
    function($http, $q) {...}]);

EDIT: I removed $scope since it can't be injected into factories.

Upvotes: 1

Related Questions