twitter-bootstrap AngularJS-Bootstrap TypeAhead 中的错误：TypeError：无法读取未定义的属性“长度”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25114911/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Error in AngularJS-Bootstrap TypeAhead: TypeError: Cannot read property 'length' of undefined
提问by Pramod Karandikar
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)
我在尝试从 AngularUI-Bootstrap 实现 AngularJS Typeahead 时遇到以下错误：（我只是调用一个以 JSON 格式返回结果的 servlet）
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
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
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
来自 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?
但是，我仍然无法弄清楚分辨率。servlet 本身的响应是否有任何问题？或者是别的什么？
回答by maurycy
after second look at code I've noticed what's wrong, you have to return $http promise here, notice returnbefore $http
第二次查看代码后，我注意到出了什么问题，你必须在这里返回 $http 承诺，return在 $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;
});
};
