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:
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?
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;
});
};