Angularjs and Web service Issue

Question

I am not getting data from Web service's response in angularjs using $http.get method.What cause is this?? It is directly goes to error part.

Web service code:

 @GET
 @Path("/getEmployeeList")
 @Produces(MediaType.APPLICATION_JSON)
 public Response getEmployeeList() {
    ArrayList<Employee> empList = (ArrayList<Employee>) employeeService.getAllEmployees();
    return Response.status(200).entity(empList).build();
}

Angular Js:

<script src="angular.js"></script>
</head>
<body  >

<div  ng-app="hello">
    <h1>Greeting</h1>
    <div ng-controller="home" >
      <div ng-repeat="a in greeting">
        <p>The Id is: {{a.empId}}</p>
        <p>The content is: {{a.firstName}}</p>
         <p>The content is: {{a.lastName}}</p>
       </div>
    </div>
 </div>
    </body>
  <script >
   var myApp = angular.module('hello', []);
  myApp.controller('home',['$scope','$http',function($scope,$http) {
    $http.get("http://localhost:8080/restful-jersey-spring-demo/restws/employee/getEmployeeList")
    .success(function(data) {

        $scope.greeting = data;
    }).error(function(data, status, headers, config){
      alert("Error") 
    });
 }]);

</script>

</body>

Json Data From Web services: URL:http://localhost:8080/restful-jersey-spring-demo/restws/employee/getEmployeeList

 [
{
    "empId": 1,
    "firstName": "Chirag",
    "lastName": "L"
},
{
    "empId": 2,
    "firstName": "Prashant",
    "lastName": "K"
}
]

console.info error details or put your browser in developer mode to get error details. I suspect the use of absolute uri. did you try using this one `/restful-jersey-spring-demo/restws/employee/getEmployeeList`? — boly38, Aug 11 '15 at 13:33
I am getting following Error:Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8080/restful-jersey-spring-demo/restws/employee/getEmployeeList. (Reason: CORS header 'Access-Control-Allow-Origin' missing). — Vivek, Aug 11 '15 at 13:40
According to CORS, a different port is a different origin. You'll need to make sure your Jersey response includes a header of Access-Control-Allow-Origin: * . — Eric McCormick, Aug 11 '15 at 15:52

wero · Answer 1 · 2015-08-11T13:46:58.580

1

$http does not pass the response data but the response to the success callback. Therefore use:

$http.get("http://localhost:8080/restful-jersey-spring-demo/restws/employee/getEmployeeList")
    .success(function(response) {
        $scope.greeting = response.data;
    }).error(function(response){
        alert("Error") 
});

For the CORS-error see this thread.

edited Aug 11 '15 at 13:46

answered Aug 11 '15 at 13:20

wero

32,544
3
59
84

then debug this function: set a breakpoint in your success callback and examine the value which is passed. – wero Aug 11 '15 at 13:30
I am getting following Error:Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8080/restful-jersey-spring-demo/restws/employee/getEmployeeList. (Reason: CORS header 'Access-Control-Allow-Origin' missing). – Vivek Aug 11 '15 at 13:41
I would recomend using `.then(function successHandler() {}, function errorHandler() {})` because it returns promise implicitly which is not the case with `.success()` and `.error()`. Because of this, in provided example it is imposible to chain additional promise handlers which is very often needed during normal development. – tomastrajan Aug 11 '15 at 14:39

score 1 · Accepted Answer · answered Aug 12 '15 at 05:12

Add the header at response....

@GET
@Path("/getEmployeeList")
@Produces(MediaType.APPLICATION_JSON)
 public Response getEmployeeList() {
 ArrayList<Employee> empList = (ArrayList<Employee>)  employeeService.getAllEmployees();
 return Response.status(200).entity(empList).***header("Access-Control-Allow-Origin", "*")***.build();
}

Angularjs and Web service Issue

2 Answers2