1
\$\begingroup\$

I've created a search function that allows users to enter a movie title in an input field and the function will then display all the results corresponding the search query beneath the input field. Then users can click on a add movie button to add the movie to their watchlist.

There's one big problem I'm facing with this solution. I can't add the release dates to the JSON output for the search request, but I want to add the release date of the Netherlands. So my solution is to when a user clicks add movie do another JSONP request but now using the ID of the movie. Now I can get the release dates of the movie and add all the values I want to the database.

But I think there could be a better solution for this problem.

searchController.js

This takes the input searchquery and passes it into the searchService and then inserts the data from the searchService into the movieList scope.

$scope.search = function() {

  if($('#search_input').val()) {
    // Input field has value

    MovieSearch.search($scope.searchquery)
      .then(function(response){
        $scope.movieList = response;
      })
      .catch(function(response) {
      });
    }

  else {
    // do nothing
  }
}

searchService.js

var service = {};
var baseUrl = 'http://api.themoviedb.org/3/';

function httpPromise (url) {
  var deferred = $q.defer();
  $http({
    method:'JSONP',
    url: url
  })
    .success(function(data){
      deferred.resolve(data.results);
    })
    .error(function(){
      deferred.reject();
    });
  return deferred.promise;
}

service.search = function(searchquery){

  return httpPromise(baseUrl + 'search/movie?api_key=a8f7039633f2065942cd8a28d7cadad4' + '&query=' + encodeURIComponent(searchquery) + '&callback=JSON_CALLBACK')
}

This is the template to display the search results:

%li.search_results{"ng-if" => "movie.release_date && movie.poster_path", "ng-repeat" => "movie in movieList | orderBy:'-release_date'"}

  .addmovie{"ng-click" => "addMovie(movie)"}

In the template above you can see the addMovie(movie) function, and below is that addMovie function in the addMovieController.js,

$scope.wishlistID = [];
$scope.addMovie = function(movie) {

  $scope.searchquery = "";

  $scope.wishlistID.push({id: movie.id});
  var movieID = $scope.wishlistID[0].id;

  movieAdd.add(movieID)
    .then(function(response){

      $scope.movieListID = response;

      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);
      };

    })

    .catch(function(response) {
      console.log ('No search response')
    });

}

addMovieService.js

var service = {};
var baseUrl = 'http://api.themoviedb.org/3/movie/';

function httpPromise (url) {
  var deferred = $q.defer();
  $http({
    method:'JSONP',
    url: url
  })
    .success(function(data){
      deferred.resolve(data);
    })
    .error(function(){
      deferred.reject();
    });
  return deferred.promise;
}

service.add = function(movieID){

  return httpPromise(
    baseUrl + movieID +        '?api_key=a8f7039633f2065942cd8a28d7cadad4&query=' +     '&append_to_response=releases&callback=JSON_CALLBACK'
  )

}

A few things happen here with this controller and service. First off, I get the ID of the movie that was clicked on and store it into a variable so I can traverse it to the service.

In the service I do another JSONP request, but now with the ID, so I can get all the data I want and then store that data into the movieListID scope.

Then using some JavaScript, I check if the movieListID scope contains the Dutch release date. If it doesn't, I use the first create function, and if it does, I do the second create function.

Is there a better/different way to get the data (country releases) so I can use less code?

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.