Leveraging a factory value within another factory in AngularJS

Question

Leveraging a factory value within another factory in AngularJS

Greetings! I am currently working on a web application using AngularJS. Within my project, I have a JavaScript file containing two factories that make HTTP calls to a web API. My goal is to utilize the output of one factory within another factory. Below is the code for my initial factory:

myapp.factory('sadadpaymentapi', ['$http', '$cookieStore', 'cfg', 'ScrollFunction', 'leaselisting','$q', function ($http, $cookieStore, cfg, ScrollFunction, leaselisting,$q) {
    var sadadpaymentapiobject = {};
    var baseurl = cfg.Baseurl;
    var LoginID = $cookieStore.get("LoginID");
    var cookiePreferredLanguage = $cookieStore.get('PreferredLanguage');
    var urlapi = baseurl + "api/ServiceRequest/CreateRSSedad/";
    sadadpaymentapiobject.callsadad = function (PaymentType) {
        var request = {
            url: urlapi,
            method: 'POST',
            data: {
                SRActivityID: LoginID,
                PaymentType: PaymentType,
                PaymentAmount: "100" //Need to get value from another factory
            },
            headers: ScrollFunction.getheaders()
        };
        return $http(request);
    }
    return sadadpaymentapiobject;
}]);

Next, we have another factory that provides the required value for the PaymentAmount parameter in our previous factory.

myapp.factory('leaselisting', ['$http', '$cookieStore', 'cfg', 'ScrollFunction','$q', function ($http, $cookieStore, cfg, ScrollFunction,$q) {
    var leaselistingobject = {};
    var baseurl = cfg.Baseurl;
    var LoginID = $cookieStore.get("LoginID");
    var cookiePreferredLanguage = $cookieStore.get('PreferredLanguage');
    leaselistingobject.getValue = function () {
        var requestObj = {
                                url: baseurl + "api/ServiceRequest/GetROLSPSRLeaseList/",
                                method:'POST',
                                data: {
                                    LoginID: LoginID,
                                    AccountNumber: $cookieStore.get("AccountNumber")
                                },
                                headers: ScrollFunction.getheaders()
                    };
        return $http(requestObj).then(function (response) {
            return response.data;
        });
    }
    return leaselistingobject;
}]);

When attempting to inject

PaymentAmount: leaselisting.getValue()

and checking the console log with

console.log(leaselisting.getValue());

, a Promise {$$state etc. is returned. Referencing the provided screenshot, what I require from this setup is the variable AccountNumber.

In my first API call, rather than hardcoding PaymentAmount: "100", I aim to retrieve it from the other factory. Any guidance on achieving this would be greatly appreciated. Thank you.

javascript angularjs

Answer 1

Answer №1

Embed the factory into another factory and follow the same steps as you would in a controller,

myapp.factory('rentallist', ['$http', '$cookieStore', 'config', 'ScrollBehaviour','$q','paymentapi', function ($http, $cookieStore, config, ScrollBehaviour,$q,paymentapi) {

Answer 2

Embed the factory into another factory and follow the same steps as you would in a controller,

myapp.factory('rentallist', ['$http', '$cookieStore', 'config', 'ScrollBehaviour','$q','paymentapi', function ($http, $cookieStore, config, ScrollBehaviour,$q,paymentapi) {

Answer 3

Answer №2

leaselisting factory includes a method called getValue that makes an asynchronous call and resolves it.

Here is an example of how you can use it:

// ...
var request = {
        url: urlapi,
        method: 'POST',
        data: {
            SRActivityID: LoginID,
            PaymentType: PaymentType,
            PaymentAmount: leaselisting.getValue();
        },
 // ...

You can see a demonstration in Fiddle that illustrates your situation. Since the second async call depends on the first one, I recommend using a Promise chain. In this case, I have simulated the async call with $timeout to return part of the address (in your case, it is PaymentAmount), resolved it with a promise, and then made another Promise call using $http.

app.controller('fessCntrl', function ($scope, sadadpaymentapi) {

    $scope.alertSwap = function () {           
        $scope.data = sadadpaymentapi.getData();    
    }; 
});

app.$inject = ['$scope', 'leaselisting'];

app.factory('leaselisting', ['$timeout','$q',  function($timeout, $q) {    

       var leaselistingobject = {
            getValue: function () {              
               var deferred = $q.defer();               
               $timeout(function(){                  
                return {address: 'Singapore, SG, Singapore, 153 Bukit Batok Street 1'};
               }, 3000).then(function(val){
               deferred.resolve(val); 
               });              
                return deferred.promise;
            }

       };       
        return leaselistingobject;
}]);


app.factory('sadadpaymentapi', ['$http','$q','leaselisting', function($http, $q,leaselisting) {  

       var leaselistingobject = {
            getData: function () {    

               var URL = 'http://maps.googleapis.com/maps/api/geocode/json?address=';  

               return leaselisting.getValue().then(function(result){

                URL = URL + result.address + '&sensor=true';

                 return $http({method: 'GET', url: URL})
                }).then(function (response) {
                   return response.data;
                 });
            }

       };       
        return leaselistingobject;
}]);

Answer 4

leaselisting factory includes a method called getValue that makes an asynchronous call and resolves it.

Here is an example of how you can use it:

// ...
var request = {
        url: urlapi,
        method: 'POST',
        data: {
            SRActivityID: LoginID,
            PaymentType: PaymentType,
            PaymentAmount: leaselisting.getValue();
        },
 // ...

You can see a demonstration in Fiddle that illustrates your situation. Since the second async call depends on the first one, I recommend using a Promise chain. In this case, I have simulated the async call with $timeout to return part of the address (in your case, it is PaymentAmount), resolved it with a promise, and then made another Promise call using $http.

app.controller('fessCntrl', function ($scope, sadadpaymentapi) {

    $scope.alertSwap = function () {           
        $scope.data = sadadpaymentapi.getData();    
    }; 
});

app.$inject = ['$scope', 'leaselisting'];

app.factory('leaselisting', ['$timeout','$q',  function($timeout, $q) {    

       var leaselistingobject = {
            getValue: function () {              
               var deferred = $q.defer();               
               $timeout(function(){                  
                return {address: 'Singapore, SG, Singapore, 153 Bukit Batok Street 1'};
               }, 3000).then(function(val){
               deferred.resolve(val); 
               });              
                return deferred.promise;
            }

       };       
        return leaselistingobject;
}]);


app.factory('sadadpaymentapi', ['$http','$q','leaselisting', function($http, $q,leaselisting) {  

       var leaselistingobject = {
            getData: function () {    

               var URL = 'http://maps.googleapis.com/maps/api/geocode/json?address=';  

               return leaselisting.getValue().then(function(result){

                URL = URL + result.address + '&sensor=true';

                 return $http({method: 'GET', url: URL})
                }).then(function (response) {
                   return response.data;
                 });
            }

       };       
        return leaselistingobject;
}]);

Answer 5

Answer №3

If you want to retrieve the account number in your controller, you can follow this example:

 leaselisting.getValue().then(function(response){
         // Obtain the account number here and pass it to another factory
           var accountNumber = response.data.AccountNumber;
          sadadpaymentapi.callsadad (accountNumber ).then(function(response){
                 // Deal with the final response here
          });
    });

Here is the code for the Factory:

myapp.factory('leaselisting', ['$http', '$cookieStore', 'cfg', 'ScrollFunction','$q', function ($http, $cookieStore, cfg, ScrollFunction,$q) {
        var leaselistingobject = {};
        var baseurl = cfg.Baseurl;
        var LoginID = $cookieStore.get("LoginID");
        var cookiePreferredLanguage = $cookieStore.get('PreferredLanguage');
        leaselistingobject.getValue = function () {
            var requestObj = {
                                    url: baseurl + "api/ServiceRequest/GetROLSPSRLeaseList/",
                                    method:'POST',
                                    data: {
                                        LoginID: LoginID,
                                        AccountNumber: accountNumber
                                    },
                                    headers: ScrollFunction.getheaders()
                        };
            return $http(requestObj)
        }
        return leaselistingobject;
    }]);

Remember to inject both factories into your controller.

Answer 6

If you want to retrieve the account number in your controller, you can follow this example:

 leaselisting.getValue().then(function(response){
         // Obtain the account number here and pass it to another factory
           var accountNumber = response.data.AccountNumber;
          sadadpaymentapi.callsadad (accountNumber ).then(function(response){
                 // Deal with the final response here
          });
    });

Here is the code for the Factory:

myapp.factory('leaselisting', ['$http', '$cookieStore', 'cfg', 'ScrollFunction','$q', function ($http, $cookieStore, cfg, ScrollFunction,$q) {
        var leaselistingobject = {};
        var baseurl = cfg.Baseurl;
        var LoginID = $cookieStore.get("LoginID");
        var cookiePreferredLanguage = $cookieStore.get('PreferredLanguage');
        leaselistingobject.getValue = function () {
            var requestObj = {
                                    url: baseurl + "api/ServiceRequest/GetROLSPSRLeaseList/",
                                    method:'POST',
                                    data: {
                                        LoginID: LoginID,
                                        AccountNumber: accountNumber
                                    },
                                    headers: ScrollFunction.getheaders()
                        };
            return $http(requestObj)
        }
        return leaselistingobject;
    }]);

Remember to inject both factories into your controller.

Leveraging a factory value within another factory in AngularJS

Answer №1

Answer №2

Answer №3

Similar questions

Tips for concealing a tab within Angular Bootstrap UI using ng-show/ng-hide

Easily adding multiple field data with the same field name into a database can be achieved using Mongoose and Node.js (specifically Express

Android textView is populated with randomly generated alphanumeric text after parsing file

What is the procedure for iterating through the square brackets of a JSON array?

AngularJS synchronous function call

Manipulating arrays and troubleshooting Typescript errors in Vue JS

Closing a Javascript-created popup using server-side code

In JavaScript, the code is designed to recognize and return one specific file type for a group of files that have similar formats (such as 'mp4' or 'm4v' being recognized as 'MOV')

Why is my Laravel function retrieving outdated session data?

Troubleshooting the malfunctioning of the Bootstrap slide animation

Utilizing children as a prop within a Vue component

Guide on creating an AJAX request for a POST method

Trouble with the display none function

Firestore version 9 - Retrieve nested collection depending on a string being present in an array

Turn off HTML5 Audio

Craft dynamic SVG components using TypeScript

What is the best approach for finding the xPath of this specific element?

Angular Controller setup

Accessing attribute value of selected option in AngularJS select element

Issues with integrating VUE frontend with PHP backend and API