Sheetal Jain Sheetal Jain - 3 months ago 9
JSON Question

Unable to show webservice response in html using angularjs

I am fetching a list of users from angular js by making a call to spring rest webservice . I am receiving a response in my service but not able to print the same in html file. There is no error on console.

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

}


Login.jsp

<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"}

Answer

You are using controller as syntax witch do you create a new instance and you can access to properties you have bound to controller directly from the controller instance. If you want to use controller as syntax then you bind your function or object to the controller instead $scope. You could do this

var vm = this.

vm.yourData = resultFromBeckend ;

and in view

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

In your case change this line. From

 $scope.userData = responseData.data.usersList;

To

 vm.userData = responseData.data.usersList;

Your userData is not on the controller it's on the $scope. It's also best practice to bind your object to the controller and use controller as syntax. Angular Best Practice from JhonPapa

Comments