Angular - Pass input value to factory $http query parameter

Question

I have created a factory to run an $http GET method. I need to add an input value to the URL pulling in the JSON but I'm having trouble passing it from the controller. I can see that the URL is being created correctly, I am just missing the "query" parameter from the form input field.

Here is my HTML block:

<input type="string" class="form-control" ng-model="getMovie.title">

Here is my factory and controller:

    var app = angular.module('app', []);
    app.factory("getMovie", ['$http',function($http){
    var obj = {};
    var url = "https://api.nytimes.com/svc/movies/v2/reviews/search.json";
    obj.getMovieInfo = function(){ 
    return $http({
        url: url,
        method: "GET",
        params:{ 
            query: this.title, // This is the value I need
            api_key: "68094e1974e7984c256beb1653319915:3:33678189",
            callback: "JSON_CALLBACK"
      },
        headers: {
            "Content-Type" : "application/json"
        }
     }).then(function successCallback(response) {
            this.movieReviews = response.data.results; 
      }, function errorCallback(response) {
            console.log("Nothing to see here...");
      });
    }
        return obj;
    }]);

app.controller('moviesCtrl', ["$scope", "getMovie", function($scope, getMovie){
    $scope.findMovie = function(){
        getMovie.getMovieInfo().then(function(response){
            $scope.results = response;
        });
    }
}]);

Thanks!

mws_souza · Accepted Answer · 2017-04-09 00:33:07Z

1

You can send the title as parameter to the factory method.

<input type="string" class="form-control" ng-model="title">

var app = angular.module('app', []);

app.factory("getMovie", ['$http',function($http){
var obj = {};
var url = "https://api.nytimes.com/svc/movies/v2/reviews/search.json";
obj.getMovieInfo = function(title){ 
return $http({
    url: url,
    method: "GET",
    params:{ 
        query: title, // This is the value I need
        api_key: "68094e1974e7984c256beb1653319915:3:33678189",
        callback: "JSON_CALLBACK"
  },
    headers: {
        "Content-Type" : "application/json"
    }
 }).then(function successCallback(response) {
        this.movieReviews = response.data.results; 
  }, function errorCallback(response) {
        console.log("Nothing to see here...");
  });
}
    return obj;
}]);

app.controller('moviesCtrl', ["$scope", "getMovie", function($scope, getMovie){
    $scope.findMovie = function() {
        getMovie.getMovieInfo($scope.title).then(function(response){
            $scope.results = response;
        });
     }
}]);

answered Apr 9, 2017 at 0:33

mws_souza

685 bronze badges

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

4 Comments

wdc_dt Over a year ago

We have a winner! I can't believe I didn't try this before but I'm thrilled it works. I will mark as solved. Thanks!

wdc_dt Over a year ago

mws_souza, I wonder if you can help with a new question: My ng-repeat is no longer rendering the JSON. Looks like I need to do something with "movieReviews and $scope.results but I'm not sure exactly what that is!

wdc_dt Over a year ago

I figured it out: I updated vm.movieReviews = response.data.results to return response.data.results. Thanks, all!

mws_souza Over a year ago

@wdc_dt Great! I'm glad to help you :)

Akashii · Accepted Answer · 2017-04-09 00:17:35Z

1

I recommend you dont use this . If you want use controllerAs syntax , use like this . You can see more in here

https://github.com/johnpapa/angular-styleguide/tree/master/a1#controllers

  app.factory("getMovie", ['$http',function($http){  
 var  vm = this
    vm.getMovie ={};

And in ajax

return $http({
        url: url,
        method: "GET",
        params:{ 
            query: vm.getMovie, // This is the value I need
            api_key: "68094e1974e7984c256beb1653319915:3:33678189",
            callback: "JSON_CALLBACK"
      },
        headers: {
            "Content-Type" : "application/json"
        }
     }).then(function successCallback(response) {
            vm.movieReviews = response.data.results; 
      }, function errorCallback(response) {
            console.log("Nothing to see here...");
      });
    }
        return obj;
    }]);

answered Apr 9, 2017 at 0:17

Akashii

2,2815 gold badges19 silver badges32 bronze badges

2 Comments

wdc_dt Over a year ago

Thanks so much for this explanation. I am still unable to pull in the query parameter I need from my <input> tag. It's trying but is only giving me "query=%7B%7D". Do you have a suggestion for any changes I may need to make to my controller or ng-model value?

wdc_dt Over a year ago

mws_souza has answered this question, thanks for the help, Thanh!

Collectives™ on Stack Overflow

Angular - Pass input value to factory $http query parameter

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related