How a promise returning a promise fails
Question
there are two rest call
the first is
http://localhost:8080/sample/rest/ser/out/2
which return
{"num":"2"}
the the second rest call
http://localhost:8080/sample/rest/ser/person/list2/two
which return
[{"personName":"Rahul Shivsharan","personId":123},{"personName":"Mehul Sarnikar","personId":34},{"personName":"Praful Patel","personId":343}]
What i need to do is on the basis of the response of the first rest I need to invoke the second rest call.
i have written one angularjs code
which is as follows
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script type="text/javaScript" src="../scripts/angular.js"></script>
<script src="../scripts/angular-resource.js"></script>
<script type="text/javascript">
var myApp = angular.module("myApp",['ngResource']);
myApp.factory("CountService",function($resource){
return $resource("../rest/ser/out/:num",{
num : "@num"
});
}).factory("PersonService",function($resource,CountService,$interval){
var obj = new Object();
obj.getPersonList = function(inputTxt){
return CountService.get({
"num" : inputTxt
}).$promise.then(function(response){
var url = "../rest/ser/person/list2/";
if(response.num === 2){
url += "two";
}else if(response.num === 3){
url += "three";
}else{
url += "other";
}
return $resource(url,{});
});
};
return obj;
}).controller("myCtrl",function($scope,PersonService){
$scope.getInfo = function(){
PersonService.getPersonList($scope.inputTxt).query().$promise.then(function(response){
$scope.personList = response;
});
}
});
</script>
</head>
<body ng-controller="myCtrl">
<h1>{{num}}</h1>
<br />
<input type="text" ng-model="inputTxt" /><br/><br/>
<input type="button" value="ENTER" ng-click="getInfo()" />
<br /><br /><br />
<table border="2">
<tr ng-repeat="per in personList">
<td>{{per.personName}}</td>
<td>{{per.personId}}</td>
</tr>
</table>
</body>
What it does is on the basis of input enter by user the first rest call is made, and than after the success of the first rest call the second rest call is made.
so first rest call returns "2", which i convert to "two" and append to url of the second rest call.
but here i am getting a error
it is
TypeError: PersonService.getPersonList(...).query is not a function
at Scope.$scope.getInfo (index.html:65)
at Parser.functionCall (angular.js:10795)
at angular.js:19036
at Scope.$get.Scope.$eval (angular.js:12632)
at Scope.$get.Scope.$apply (angular.js:12730)
at HTMLInputElement.<anonymous> (angular.js:19035)
at angular.js:2843
at forEach (angular.js:325)
at HTMLInputElement.eventHandler (angular.js:2842)
What i thought is a promise returns a promise itself,
so my code should work, but it doesn't,
where am i going wrong.
can u suggest me a better solution
2 answers
solution1
1 2015-05-11 15:56:56
Your problem is that PersonService.getPersonList does not return an object with a (function) property called query . I don't know what getPersonList returns, but if it is a promise this should still fail because promises do not have a query function in angular.
solution2
1 ACCPTED 2015-05-11 16:20:12
Like @AlexMA said, you are returning a $resource "class" object .
The easiest way to get things working would be to provide an extra .then statement prior to calling .query() :
$scope.getInfo = function(){
PersonService.getPersonList($scope.inputTxt)
.then(function(resource) {
return resource.query().$promise;
})
.then(function(response){
$scope.personList = response;
})
;
};
Here is an example of it in action: http://plnkr.co/edit/P00rbUk1ld8eo0VD6OyN?p=preview
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.