Error in AngularJS-Bootstrap TypeAhead: TypeError: Cannot read property 'length' of undefined
19,619
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;
});
};
Related videos on Youtube
Comments
-
Pramod Karandikar almost 2 years
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
I have referred to the below questions:
- AngularUI-Bootstrap's Typeahead Can't Read `length` Property of `undefined`
- typeahead angular ui - cannot read property 'length' of undefined
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?
-
Pramod Karandikar over 9 yearsMy bad, worked as soon as I added "return" :) You saved the day!
-
maurycy over 9 yearseasy to overlook, have a nice day :)