CODEWITHSUNDEEP
javascriptangularjs
Rahul Shivsharan
Rahul Shivsharan

Reputation: 2561

How a promise returning a promise fails

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

Upvotes: 0

Views: 76

Answers (2)

potatosalad
potatosalad

Reputation: 4887

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

Upvotes: 1

AlexMA
AlexMA

Reputation: 10214

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.

Upvotes: 1

Related Questions