Retrieving data from a variable created by a Factory that triggers an asynchronous request

Question

Retrieving data from a variable created by a Factory that triggers an asynchronous request

I have a scenario where one factory sends a POST request to receive key-value pairs in JSON format:

.factory('DataFetcher', ['$resource',
function($resource) {

    // Returns JSON key-value pairs, for example "{'foo', 'bar'}"
    return $resource('api/fetch-data', {}, {
        get: {
            method: 'POST'
        }
    });

}])

Another factory is designed to be used by controllers to access a specific value based on its key:

.factory('ValueAccessor', ['DataFetcher',
function(DataFetcher) {

    var data;

    DataFetcher.get(function(response) {
        data = response;
    });

    return {
        get: function(key) {
            return data[key];
        }
    };

}])

The issue arises when calling ValueAccessor.get('foo'), the data object from the ValueAccessor factory is not initialized yet (as DataFetcher.get is asynchronous), resulting in a

TypeError: Cannot read property 'foo' of undefined

:

.controller('SomeController', ['ValueAccessor',
function (ValueAccessor) {

    console.log(ValueAccessor.get('foo')); // error

}])

Any suggestions on how to resolve this situation?

javascript angularjs asynchronous

Answer 1

Answer №1

It was mentioned in your query that Rest.get operates asynchronously, requiring your Pairs.get to also be asynchronous. Below is a possible implementation:

.factory('Pairs', ['Rest', '$q',
function(Rest, $q) {

var pairs;
var deferredList = [];

Rest.get(function(response) {
    pairs = response;
    angular.forEach(deferredList, function(o) {
        o.deferred.resolve(pairs[o.key]); // resolve saved defer object
    });
    deferredList = null; // list no longer needed
});

return {
    get: function(key) {
        if (pairs) {
            return $q.when(pairs[key]); // convert immediate value to promise
        }

        var deferred = $q.defer(); // creating a deferred object for later resolution
        deferredList.push({ // save key and deferred object for later use
            key: key,
            deferred: deferred
        });
        return deferred.promise;
    }
};

}])

To utilize this, you can follow this example:

Pairs.get('foo').then(function(value) {
    console.log(value);
});

Answer 2

It was mentioned in your query that Rest.get operates asynchronously, requiring your Pairs.get to also be asynchronous. Below is a possible implementation:

.factory('Pairs', ['Rest', '$q',
function(Rest, $q) {

var pairs;
var deferredList = [];

Rest.get(function(response) {
    pairs = response;
    angular.forEach(deferredList, function(o) {
        o.deferred.resolve(pairs[o.key]); // resolve saved defer object
    });
    deferredList = null; // list no longer needed
});

return {
    get: function(key) {
        if (pairs) {
            return $q.when(pairs[key]); // convert immediate value to promise
        }

        var deferred = $q.defer(); // creating a deferred object for later resolution
        deferredList.push({ // save key and deferred object for later use
            key: key,
            deferred: deferred
        });
        return deferred.promise;
    }
};

}])

To utilize this, you can follow this example:

Pairs.get('foo').then(function(value) {
    console.log(value);
});

Answer 3

Answer №2

When dealing with asynchronous functions, it's important to wrap them in a promise for better control. Below is an example of how I have implemented a similar solution. Please remember that safeApply triggers the $digest cycle to allow Angular to react to any data changes it is monitoring.

 var safeApply = function (scope, fn) {
                    if (scope.$$phase || scope.$root.$$phase) { 
                        fn(); 
                    } else {  
                        scope.$apply(fn); 
                    }
                };

ret.getAll = function(type) {
    var deferred = $q.defer();
    var where = "apm_type = '" + type + "'";

    query(type, where, function(err, response) {
        var objs = [];
        if (err) {
            safeApply($rootScope, function() { deferred.reject(err);});
        } else {
            safeApply($rootScope, function() { deferred.resolve(response);});
        }

    }); 
    return deferred.promise;
};

Answer 4

When dealing with asynchronous functions, it's important to wrap them in a promise for better control. Below is an example of how I have implemented a similar solution. Please remember that safeApply triggers the $digest cycle to allow Angular to react to any data changes it is monitoring.

 var safeApply = function (scope, fn) {
                    if (scope.$$phase || scope.$root.$$phase) { 
                        fn(); 
                    } else {  
                        scope.$apply(fn); 
                    }
                };

ret.getAll = function(type) {
    var deferred = $q.defer();
    var where = "apm_type = '" + type + "'";

    query(type, where, function(err, response) {
        var objs = [];
        if (err) {
            safeApply($rootScope, function() { deferred.reject(err);});
        } else {
            safeApply($rootScope, function() { deferred.resolve(response);});
        }

    }); 
    return deferred.promise;
};

Retrieving data from a variable created by a Factory that triggers an asynchronous request

Answer №1

Answer №2

Similar questions

What methods should I use to modify the upcoming array of objects?

Troubleshooting Vue.js data binding problems

What steps can be taken to verify that observables from distinct components have been fully executed?

Ways to halt the repetition of clicking the like button on my social media posts

The powerful trio of Node.js, Express.js, and Socket.io synergistically

Strategies for halting the return of a JavaScript function until all AJAX requests have been completed

Setting a cookie in a browser using an AJAX response: A step-by-step guide

Exploring the Depths of Scope Hierarchy in AngularJS

Baffled by the intricacies of jQuery

Interact with embedded elements in JavaScript by using the onClick event

Duplicate key error in Node.js/Express with req.param

JavaScript-based tool for extracting content from Sketch file

Iterating through a jQuery function to increment value

Connect to the Kendo dropdown list undefined

The state variable is not accurately captured as it passes through various components

What could be causing my jQuery event handler to not work properly when connected to numerous elements?

Automatically navigate to a new page once form submission is successful and posts have

React blogging site's administrative dashboard

Basic AngularJS program: Displaying a issue in Gruntfile.js

Arrange array items according to the values of two attributes