web-dev-qa-db-ja.com

AngularJSのエラー-ブートストラップTypeAhead：TypeError：未定義のプロパティ 'length'を読み取れません

AngularUI-BootstrapからAngularJSTypeaheadを実装しようとすると、以下のエラーが発生します:(結果をJSON形式で返すサーブレットを呼び出すだけです）

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

サーブレット

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());


    }

サーブレットからの応答 enter image description here

私は以下の質問を参照しました：

しかし、それでも私は解決策を理解することができません。サーブレット自体からの応答に問題はありますか？それとも何か他のものですか？

javascriptangularjstwitter-bootstrapservletstypeahead
9
Pramod Karandikar

何が問題なのか気付いたコードをもう一度見てから、ここで$ httpのpromiseを返す必要があります。$ httpの前にreturnに注意してください。

$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;
        });
    };
11
maurycy