AngularJS with Jersey JSON resource in undefined in javascript - json

Question

This is weird issue I have so far.
I am using jaxon backbone to do this Angularjs project.
java resource file
#GET #Path("{query}")
#Produces({ MediaType.APPLICATION_JSON, MediaType.APPLICATION_XML })
public Signature findByName(#PathParam("query") String query) {
return dao.findById(query);
}
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
};
}
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'});
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.

Answer 1

You are trying to print the resource before it is available. The request to the server is asynchronous. Put alert("data is " + $scope.signature.name); in the success callback instead.
$scope.searchaction = function (barcodenum, signature) {
Signature.query({ rewardcardId: barcodenum },
function(data) {
$scope.signature = data;
alert("data is " + $scope.signature.name);
},
function(err) { // error handling can go here
});
};
I am not sure why you pass signature to $scope.searchaction and then perform an assignment operation on it.