AngularJS Search Form throws undefined error

Question

I've built a simple search form in AngularJS but get an undefined error.

The code is as follows for the list controller:

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

phonecatControllers.controller('PhoneListCtrl', ['$scope', 'Phone',
  function($scope, Phone) {
    $scope.phones = Phone.query();
    $scope.orderProp = 'age';
  }]);

And the search controller as:

phonecatControllers.controller('SearchCtrl', ['$scope', 'Phone', 
    function ($scope, $http) {
        $scope.url = 'phones.json';
        // The function that will be executed on button click (ng-click="search()")
        $scope.search = function() {

            // Create the http post request
            // the data holds the keywords
            // The request is a JSON request.
            $http.post($scope.url, { "data" : $scope.keywords})
            .success(function(data, status) {
                $scope.status = status;
                $scope.data = data;
                $scope.result = data; // Result
            })
            .error(function(data, status) {
                $scope.data = data || "Request failed";
                $scope.status = status;         
            });
        }
    }]);

The HTML looks like this for the search form:

<div ng-controller="SearchCtrl">
    <form class="well form-search">
        <label>Search:</label>
        <input type="text" ng-model="keywords" class="input-medium search-query" placeholder="Keywords...">
        <button type="submit" class="btn" ng-click="search()">Search</button>
    </form>
    <div ng-model="result">
    {{result}}
    </div>
</div>

The error that undefined is not a function for this line: $http.post($scope.url, { "data" : $scope.keywords}).

Can anyone point me in the right direction?

It's also not doing the query string on the URL so it's not becoming part of the history stack.

The service looks like:

phonecatServices.factory('Phone', ['$resource',
  function($resource){
    return $resource('phones/:phoneId.json', {}, {
      query: {method:'GET', params:{phoneId:'phones'}, isArray:true}
    });
  }]);

So in short... why am I getting the undefined error? And why isn't the query string being passed?

on what line you are getting the error, better you add a demo. — Mritunjay
– Mritunjay, Commented Aug 18, 2014 at 9:30

sabithpocker · Accepted Answer · 2014-08-18 09:40:52Z

2

mistake is here in this line -

phonecatControllers.controller('SearchCtrl', ['$scope', 'Phone',

It should be

phonecatControllers.controller('SearchCtrl', ['$scope', '$http',

you should pass $http, not phone

edited Aug 18, 2014 at 9:40

sabithpocker

15.6k1 gold badge44 silver badges78 bronze badges

answered Aug 18, 2014 at 9:33

Rabi

2,23019 silver badges18 bronze badges

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

Comments

V31 · Accepted Answer · 2014-08-18 11:54:32Z

1

You need to initialize keywords before using it either in the controller:

phonecatControllers.controller('SearchCtrl', ['$scope', 'Phone', 
   function ($scope, $http) {
    $scope.url = 'phones.json';
    $scope.keywords = '';
    // The function that will be executed on button click (ng-click="search()")
    $scope.search = function() {

        // Create the http post request
        // the data holds the keywords
        // The request is a JSON request.
        $http.post($scope.url, { "data" : $scope.keywords})
        .success(function(data, status) {
            $scope.status = status;
            $scope.data = data;
            $scope.result = data; // Result
        })
        .error(function(data, status) {
            $scope.data = data || "Request failed";
            $scope.status = status;         
        });
    }
}]);

Or in the HTML using ng-init

<div ng-controller="SearchCtrl">
    <form class="well form-search" ng-init="keywords:''">
        <label>Search:</label>
        <input type="text" ng-model="keywords" class="input-medium search-query" placeholder="Keywords...">
        <button type="submit" class="btn" ng-click="search()">Search</button>
    </form>
    <div ng-model="result">
    {{result}}
    </div>
</div>

As per the new Question here is the update:

You need to remove the double quotes from data and then pass the data something like this:

 $http.get($scope.url, { data : $scope.keywords})
        .success(function(data, status) {
            $scope.status = status;
            $scope.data = data;
            $scope.result = data; // Result
 })

passing by RESTful approach

 $http.get($scope.url+'/'+$scope.keywords)
        .success(function(data, status) {
            $scope.status = status;
            $scope.data = data;
            $scope.result = data; // Result
 })

edited Aug 18, 2014 at 11:54

answered Aug 18, 2014 at 9:33

V31

7,6643 gold badges28 silver badges44 bronze badges

6 Comments

Cameron Over a year ago

Any ideas for the query string part? I've updated my question to show how am I trying to do it.

Cameron Over a year ago

Doesn't add anything to the URL when I submit the form (but it does the search).

V31 Over a year ago

it wont add anything to the url it is sending it the request body

Cameron Over a year ago

So how do I add it then? It should update the History so that if the user visits a result and then goes back it will return them to their search query.

Cameron Over a year ago

Doesn't pass it :( and the cached JS has been cleared.

|

Cameron · Accepted Answer · 2014-08-18 15:49:40Z

0

To pass the query string I've done:

phonecatControllers.controller('SearchCtrl', ['$scope', '$http', '$location', 
    function ($scope, $http, $location) {
        $scope.keywords = $location.search()['q'];
        $scope.search = function() {
            $location.path('/phones').search('q', $scope.keywords);     
            });

        }
    }]);

edited Aug 18, 2014 at 15:49

answered Aug 18, 2014 at 13:50

Cameron

28.9k103 gold badges291 silver badges491 bronze badges

Collectives™ on Stack Overflow

AngularJS Search Form throws undefined error

3 Answers 3

Comments

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related