无法使用 angularjs 在 html 中显示 Web 服务响应答案

【问题标题】：Unable to show webservice response in html using angularjs无法使用 angularjs 在 html 中显示 Web 服务响应
【发布时间】：2016-08-09 16:56:31
【问题描述】：

我通过调用 spring rest webservice 从 angular js 获取用户列表。我在我的服务中收到响应，但无法在 html 文件中打印相同的响应。控制台没有错误。

services.js

    fetchUsersDetails:function(){
        var deferred=$q.defer();
        var url="http://localhost:8081/HCP_Android_Demo/fetchUsers";
        return $http.post(url).success(function(response){
            deferred.resolve(response);
        }).error(function(response){
            alert("The error response is"+response);            
        });
        return deferred.promise;
    }

controller.js

function fetchUsers(){
    UserService.fetchUsersDetails().then(function(responseData){
        $scope.userData = responseData.data.usersList;
        $scope.result = responseData.data.Result;
        alert("users list is"+$scope.userData);//prints [Object object]
        alert("result is"+$scope.result);//prints ok
    });
};

Controller.java

 @RequestMapping(value="/fetchUsers",method={RequestMethod.POST,RequestMethod.GET})
@ResponseBody
public String fetchUsers()throws JSONException{
    System.out.println("Inside fetchUsers");
    List<User> userList=userService.fetchUsers();
    ArrayList<JSONObject> arrayList=new ArrayList<JSONObject> ();
    try{
        for(User user:userList){
            JSONObject jsonObject=new JSONObject();
            jsonObject.put("name", user.getUsername());
            jsonObject.put("address", user.getAddress());
            jsonObject.put("email",user.getEmail());
            arrayList.add(jsonObject);
        }
    }
    catch(Exception exception){
        exception.printStackTrace();
    }

    JSONObject usersList=new JSONObject();
    usersList.put("Result", "OK");
    usersList.accumulate("usersList", arrayList);
    /*return callBackFunction +"(" + jsonObject.toString() + ")";   */  
    return  usersList.toString() ;

}

  <body ng-app="myApp" ng-controller="UserController as ctrl">
    <div>
    <span class="tableLabel">List Of users</span>
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Address</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="users in ctrl.userData ">
                <td><span>{{users.username}}</span></td>
                <td><span>{{users.address}}</span></td>
                <td><span>{{usesr.email}}</span></td>
            </tr>
        </tbody>
    </table>
</div>
</body>

json

  {"usersList":[{"address":"sssssssss","name":"disha","email":"ssss"},{"address":"xxxx","name":"xxx","email":"xxx"},{"address":"jain.xyz92@gmail.com","name":"disha","email":"xxx"}],"Result":"OK"}

【问题讨论】：

标签： angularjs json spring web-services

【解决方案1】：

您正在使用控制器作为语法，您是否创建了一个新实例，并且您可以直接从控制器实例访问绑定到控制器的属性。如果你想使用控制器作为语法，那么你将你的函数或对象绑定到控制器而不是 $scope。你可以这样做

var vm = this.

vm.yourData = resultFromBeckend ;

在视野中

ng-controller="Ctrl as ctrl"
{{ctrl.yourData}}

在您的情况下更改此行。来自

 $scope.userData = responseData.data.usersList;

到

 vm.userData = responseData.data.usersList;

您的userData 不在控制器上，它在$scope 上。将对象绑定到控制器并使用控制器作为语法也是最佳实践。 JhonPapa 的 Angular 最佳实践

【讨论】：

和我在你上面发的帖子有什么区别？
其实我在发布答案后会更新
我可以看到，但我是在发布我的之后才看到的。如果你亲自解释过，我永远不会给出同样的答案，那将是愚蠢的。
谢谢你们俩。其实我认为controllerAs和scope可以同时使用。

【解决方案2】：

如果您使用Controller as syntax，您必须更改控制器，其中变量可以直接绑定到视图。

JS：

app.controller("UserController", ["$http",
    function( $http) {
             var vm =this;
             $http.get('test.json').then(function (response){
              vm.userData = response.data.usersList ;
        });

}]);

工作Plunker

更改您的视图，如下所示，以便直接访问您的数据，因为您使用的是 $scope 变量，

<body ng-app="myApp" ng-controller="UserController">
    <div>
    <span class="tableLabel">List Of users</span>
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Address</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="users in userData ">
                <td><span>{{users.username}}</span></td>
                <td><span>{{users.address}}</span></td>
                <td><span>{{usesr.email}}</span></td>
            </tr>
        </tbody>
    </table>
</div>
</body>

工作Plunker

【讨论】：