anglejsを使用してhtmlでwebserviceレスポンスを表示できません

私は、spring rest webserviceを呼び出すことによって、角度jからユーザーリストを取得しています。私は私のサービスで応答を受け取っていますが、htmlファイルで同じものを印刷することはできません。コンソールにエラーはありません。anglejsを使用してhtmlでwebserviceレスポンスを表示できません

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":"[email protected]","name":"disha","email":"xxx"}],"Result":"OK"}

出典

2016-08-09 Sheetal Jain

コントローラを構文として使用しています。新しいインスタンスを作成し、コントローラインスタンスからコントローラに直接バインドしたプロパティにアクセスできます。コントローラを構文として使用する場合は、$ scopeの代わりに関数またはオブジェクトをコントローラにバインドします。あなたは、あなたのケースの変更には、この行をこの

var vm = this. 

vm.yourData = resultFromBeckend ;

とのビュー

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

を行うことができます。

vm.userData = responseData.data.usersList;

へ

$scope.userData = responseData.data.usersList;

からあなたuserDataはそれが$scope上のコントローラー上にありません。オブジェクトをコントローラにバインドし、コントローラを構文として使用することもベストプラクティスです。 JhonPapaの角度別ベストプラクティス

出典

2016-08-09 17:11:27

私はあなたの上に投稿した投稿との違いは何ですか？ – Sajeetharan

説明がありません。あなたは今編集しました。それは良い感謝です –

実際に私は一度私は答えを投稿した更新です – Sajeetharan

あなたが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

が、あなたは$スコープ変数を使用しているので、直接あなたのデータにアクセスするためには、以下のようなあなたのビューを変更

<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

出典

2016-08-09 17:04:00 Sajeetharan

anglejsを使用してhtmlでwebserviceレスポンスを表示できません

答えて

関連する問題