AngularJS with Jersey JSON resource in undefined in javascript

오랜만에 잡아보는 프로그래밍 일이라 일이 손에 붙지 않던 터인데.. 문제가 발생하기 시작했다.

자바 톰켓 서버에서는 분명히 JSON 타입으로 데이타를 찿아서 리턴 했는데  자바스트립트에서는  전혀 응답이 없다. 계속 찿는 값에

UNDEFINED만 부르짖고 있다. 무슨 이유인지를 몰라 몇일을 인터넷을 뒤지다가 고수가 알려주기를…. 아주 간단하다.

서버 service 자체가 asynchronous이기에 밑의 코드상으로는 항상 Undefined 일수 밖에 없다고…

아주 우습게 답을 찿은 경우이다. 그럼 이런 경우에는 어떻게 할까?




밑의 예제 맨 밑에 답이 있다.

 

  1. java resource file
    @GET @Path("{query}")
    @Produces({ MediaType.APPLICATION_JSON, MediaType.APPLICATION_XML })
    
    public Signature findByName(@PathParam("query") String query) {
        return dao.findById(query);
    }  
  2. control.js file
    function SearchCtrl($rootScope,$scope,Signature) {
    
     // console.log('SearchCtrl is invoked!!!!!!');
      $scope.signature;
      $scope.searcherrormsg='';
    
      $scope.searchaction = function(barcodenum,signature) {
         signature = Signature.query({rewardcardId:barcodenum});
         $scope.signature = signature;
    
         alert("data is " + $scope.signature.name);   <=== This is UNDEFINED   
        };
    
    } 
  3. apps.js file
    angular.module('demo', ['demo.filters', 'demo.directives','demo.services.signature']).
      config(['$routeProvider', function($routeProvider) {
    
    $routeProvider.when('/search', {templateUrl: 'partials/search.html', controller: SearchCtrl});
    $routeProvider.otherwise({redirectTo: '/search'});
  4. service.js file
    angular.module('demo.services.signature', ['ngResource']).
    factory('Signature', function($resource){
        return $resource('api/signature/:rewardcardId', {}, {
         query: {method:'GET', params:{rewardcardId:'signature'}, isArray:false}
        });
    });

This is invoking database and server console is showing the following message ;

 com.sun.jersey.api.container.filter.LoggingFilter$Adapter finish
INFO: 1 * Server out-bound response
1 < 200
1 < Content-Type: application/json
1 < 
{"name":"xxx xxxx","customerid":187,"email":"xxxx@hotmail.com","sign":null,"barcode":"xxxx"}

And it displays return data at the HTML page properly. For example, the html page has

<p>{{signature.barcode}}

{{signature.name}}

which are displaying name and barcode properly as the above data set .

It only has an issue to get the data from the javascript that is saying undefined.

Whenever the javascript is trying to get the data from return resources from database, it is saying “undefined".

답은 바로 밑에 있다. 즉 서비call 자체가 어싱크로노스 이기에 오브젝트(object)에 바로 걸어서 답을 구할려고 했던 내가 어리 섞었던 것이었다.. 이런 간단한 것을 모르고 있었다니..

 

$scope.searchaction = function (barcodenum) {
     Signature.query({ rewardcardId: barcodenum },
         function(data) {
            $scope.signature = data;
            alert("data is " + $scope.signature.name);
         },
         function(err) { // error handling can go here
     });  
};

 

 

You may also like...

댓글 남기기