Error in AngularJS-Bootstrap TypeAhead: TypeError: Cannot read property 'length' of undefined

Question

I am getting the below error while trying to implement AngularJS Typeahead from AngularUI-Bootstrap: (I am simply calling a servlet which returns the results in JSON format)

TypeError: Cannot read property 'length' of undefined
    at http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js:3553:24
    at wrappedCallback (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js:10930:81)
    at wrappedCallback (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js:10930:81)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js:11016:26
    at Scope.$eval (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js:11936:28)
    at Scope.$digest (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js:11762:31)
    at Scope.$apply (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js:12042:24)

HTML

<h4>Users from local service</h4>
    <pre>Model: {{userList | json}}</pre>
    <input type="text" ng-model="userList" placeholder="Users loaded from local database" 
    typeahead="username for username in fetchUsers($viewValue)" 
    typeahead-loading="loadingUsers" class="form-control">
    <i ng-show="loadingUsers" class="glyphicon glyphicon-refresh"></i>

JS

$scope.fetchUsers = function(val) {
        console.log("Entered fetchUsers function");
        $http.get("http://localhost:8080/TestWeb/users", {
            params : {
                username : val
            }
        }).then(function(res) {
            var users = [];
            angular.forEach(res.data, function(item) {
                users.push(item.UserName);
            });
            return users;
        });
    };

Servlet

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        UserUtil userUtil = new UserUtil();
        List userList = userUtil.fetchUsers();
        Iterator userIterator = userList.iterator();

        JSONArray users = new JSONArray();


        while(userIterator.hasNext()) {
            UserDetails userDetails = (UserDetails)userIterator.next();

            JSONObject jo =  new JSONObject();
            jo.put("UserID", userDetails.getUserId());
            jo.put("UserName", userDetails.getUserName());
            jo.put("UserDescription", userDetails.getDescription());

            users.add(jo);
        }

        response.setContentType("application/json");
        response.getWriter().write(users.toString());


    }

Response from the servlet enter image description here

I have referred to the below questions:

However, still I am unable to figure out the resolution. Is there any issue with the response from the servlet itself? Or is it something else?

can you give us an example output from your backend? it looks like typehead is expecting an array here — maurycy
– maurycy, Commented Aug 4, 2014 at 9:03
@maurycy Added the snapshot of the response in the question. — Pramod Karandikar
– Pramod Karandikar, Commented Aug 4, 2014 at 9:07
Cool, that looks fine, can you log the users right before returning it? it should be an array of strings — maurycy
– maurycy, Commented Aug 4, 2014 at 9:22
Yes, it shows me the array like this: users= ["Test user2", "Test user3", "Test user4", "Test user5", "Test user6"] — Pramod Karandikar
– Pramod Karandikar, Commented Aug 4, 2014 at 9:24

BenMorel · Accepted Answer · 2014-08-07 08:41:31Z

13

after second look at code I've noticed what's wrong, you have to return $http promise here, notice return before $http

$scope.fetchUsers = function(val) {
        console.log("Entered fetchUsers function");
        return $http.get("http://localhost:8080/TestWeb/users", {
            params : {
                username : val
            }
        }).then(function(res) {
            var users = [];
            angular.forEach(res.data, function(item) {
                users.push(item.UserName);
            });
            return users;
        });
    };

edited Aug 7, 2014 at 8:41

BenMorel

37k52 gold badges208 silver badges339 bronze badges

answered Aug 4, 2014 at 9:27

maurycy

8,4201 gold badge30 silver badges44 bronze badges

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

2 Comments

Pramod Karandikar Over a year ago

My bad, worked as soon as I added "return" :) You saved the day!

maurycy Over a year ago

easy to overlook, have a nice day :)

Collectives™ on Stack Overflow

Error in AngularJS-Bootstrap TypeAhead: TypeError: Cannot read property 'length' of undefined

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related