I need to implement a JSON request to the TMDB database based on user input for searching. The search request URL format is similar to this, where "Bond" is used as an example query.
For this functionality, I have a search function:
$scope.search = function() {
var base = 'http://api.themoviedb.org/3';
var service = '/search/movie';
var apiKey = 'a8f7039633f2065942cd8a28d7cadad4&query='
var search = searchquery
var callback = 'JSON_CALLBACK';
var url = base + service + '?api_key=' + apiKey + search + '&callback=' + callback;
$http.jsonp(url).
success(function (data, status, headers, config) {
if (status == 200) {
$scope.movieList = data.results;
console.log($scope.movieList)
} else {
console.error('Error happened while getting the movie list.')
}
}).
error(function (data, status, headers, config) {
console.error('Error happened while getting the movie list.')
});
}
var searchquery = "Bond"
In the code snippet above, there's a placeholder variable named searchquery that needs to be populated with user input instead of a hardcoded value.
Below is the corresponding view:
%h1
Logo
%li
= link_to('Logout', destroy_user_session_path, :method => :delete)
%div{"ng-app" => "app.exampleApp"}
%div{"ng-controller" => "exampleCtrl"}
%input{"ng-change" => "search(searchquery)", "ng-model" => "searchquery", "ng-model-options" => "{ debounce: 2000 }"}
%span
{{ searchquery }}
%div{"ng-repeat" => "movie in movieList"}
{{ movie.original_title }}
Currently, the view displays all movie titles retrieved from the JSON data. How can I utilize the user-provided input for making the appropriate search requests?