Getting data from .factory in AngularJS

Question

I'm trying to access the data in the .factory file named app.factory.js. That part looks like this:

.factory('avengersService', function ($log) {
            return {
                refresh: function () {          
                    $log.info('Executed refresh()');            
                },
                getAvengers: function() {       
                console.log('getting data');            
                    var avengers = [
                        {                       
                            'Name': 'Iron Man',
                            'Real Name': 'Anthony "Tony" Edward Stark',
                            'Member Since': '1963',
                            'Notes': 'Founder of original roster. Joined West Coast Branch in West Coast Avengers vol. 2 #1 (1984). Expelled for Armor War (1987). Current member of the main Avengers team.'   
                        },
                        {
                            'Name': 'Thor',
                            'Real Name': 'Thor Odinson (a.k.a. Dr. Donald Blake, Sigurd Jarlson, Jake Olsen, Odinson)',
                            'Member Since': '1963',
                            'Notes': 'Former member of the main Avengers team.',    
                        },
                        {
                            'Name': 'Ant-Man',
                            'Real Name': 'Dr. Henry Jonathan "Hank" Pym',
                            'Member Since': '1963',
                            'Notes': 'Became Giant-Man in Avengers #2 (1963), Goliath in Avengers #28 (1966), and Yellowjacket in Avengers #59 (1969). Expelled as Yellowjacket in Avengers #213 (1981). Joined West Coast Branch as Doctor Pym in West Coast Avengers #21 (1988). Became The Wasp in Mighty Avengers #21 (March 2009). He is one of only two members, the other being Kelsey Leigh (Captain Britain), who have Avengers status in both their civilian and superhero guises. Formerly the head of the Avengers Academy, former member of the Secret Avengers and formerly the leader of the Avengers A.I. Squad. Currently merged with Ultron.',
                        }
                    ]
                    console.log('getting data DONE');                                       
                }
            }            
        })

In my controller file app.controller.js, I would like to retrieve that data:

function AvengersController(avengersService, logger) {
            var vm = this;
            vm.avengers = [];
            vm.getAvengers = getAvengers;
            vm.title = 'Avengers';

            activate();

            function activate() {
                return getAvengers().then(function() {
                    logger.info('Activated Avengers View');
                });
            }

            function getAvengers() {
                return avengersService.getAvengers().then(function(data) {
                    vm.avengers = data;
                    return vm.avengers;
                });
            }
        }

This is what the console is currently showing:

enter image description here

Some tips right now would be great!

As you are not doing a http request and not returning promise, no need to use then. Just return avengers variable from getAvengers function in factory and assign it to the vm.avengers like this vm.avengers =avengersService.getAvengers() — Anand Gargate
– Anand Gargate, Commented Dec 3, 2015 at 12:44

Jonathan Solorzano · Accepted Answer · 2015-12-03 12:47:46Z

Change getAvengers function at the factory to:

getAvengers: function() {

    return [
        {
            'Name': 'Iron Man',
            'Real Name': 'Anthony "Tony" Edward Stark',
            'Member Since': '1963',
            'Notes': 'Founder of original roster. Joined West Coast Branch in West Coast Avengers vol. 2 #1 (1984). Expelled for Armor War (1987). Current member of the main Avengers team.'
        },
        {
            'Name': 'Thor',
            'Real Name': 'Thor Odinson (a.k.a. Dr. Donald Blake, Sigurd Jarlson, Jake Olsen, Odinson)',
            'Member Since': '1963',
            'Notes': 'Former member of the main Avengers team.',
        },
        {
            'Name': 'Ant-Man',
            'Real Name': 'Dr. Henry Jonathan "Hank" Pym',
            'Member Since': '1963',
            'Notes': 'Became Giant-Man in Avengers #2 (1963), Goliath in Avengers #28 (1966), and Yellowjacket in Avengers #59 (1969). Expelled as Yellowjacket in Avengers #213 (1981). Joined West Coast Branch as Doctor Pym in West Coast Avengers #21 (1988). Became The Wasp in Mighty Avengers #21 (March 2009). He is one of only two members, the other being Kelsey Leigh (Captain Britain), who have Avengers status in both their civilian and superhero guises. Formerly the head of the Avengers Academy, former member of the Secret Avengers and formerly the leader of the Avengers A.I. Squad. Currently merged with Ultron.',
        }
    ]
}

And your controller to:

function AvengersController( avengersService, logger ) {
    var vm      = this;
    vm.avengers = [];
    vm.title    = 'Avengers';

    activate();

    function activate() {
        vm.avengers = avengersService.getAvengers();
    }
}

Your factory hasn't any callback, and since you only need to get that data from the factory, that's all you have to do.

Julo0sS · Accepted Answer · 2015-12-03 12:48:57Z

This is just because you do not return anything from your function.

Your function getAvengers() has no return / callback statement in the factory.

Here is something that should work :

app.factory('MyService',['$http',function($http){
    return {
        refresh: function () {          
            $log.info('Executed refresh()');            
        },
        getAvengers: function(callback) {       
            console.log('getting data');            
                callback([
                    {                       
                        'Name': 'Iron Man',
                        'Real Name': 'Anthony "Tony" Edward Stark',
                        'Member Since': '1963',
                        'Notes': 'Founder of original roster. Joined West Coast Branch in West Coast Avengers vol. 2 #1 (1984). Expelled for Armor War (1987). Current member of the main Avengers team.'   
                    },
                    {
                        'Name': 'Thor',
                        'Real Name': 'Thor Odinson (a.k.a. Dr. Donald Blake, Sigurd Jarlson, Jake Olsen, Odinson)',
                        'Member Since': '1963',
                        'Notes': 'Former member of the main Avengers team.',    
                    },
                    {
                        'Name': 'Ant-Man',
                        'Real Name': 'Dr. Henry Jonathan "Hank" Pym',
                        'Member Since': '1963',
                        'Notes': 'Became Giant-Man in Avengers #2 (1963), Goliath in Avengers #28 (1966), and Yellowjacket in Avengers #59 (1969). Expelled as Yellowjacket in Avengers #213 (1981). Joined West Coast Branch as Doctor Pym in West Coast Avengers #21 (1988). Became The Wasp in Mighty Avengers #21 (March 2009). He is one of only two members, the other being Kelsey Leigh (Captain Britain), who have Avengers status in both their civilian and superhero guises. Formerly the head of the Avengers Academy, former member of the Secret Avengers and formerly the leader of the Avengers A.I. Squad. Currently merged with Ultron.',
                    }
                ]);                       
            }
        };
    }]);

Here is a fiddle : http://jsfiddle.net/csdyvwvv/

Pjetr · Accepted Answer · 2015-12-03 13:50:50Z

this looked like fun, so I created a plunker, but it seems you have already found your answer.

Only real difference is that I made the factory send out a promise.

angular.module('AvengersApp')
    .factory('AvengersFactory', ['$q', AvengersFactory]);

    function AvengersFactory($q) {
        var avengers = [
            {                       
                'Name': 'Iron Man',
                'Real Name': 'Anthony "Tony" Edward Stark',
                'Member Since': '1963',
                'Notes': 'Founder of original roster. Joined West Coast Branch in West Coast Avengers vol. 2 #1 (1984). Expelled for Armor War (1987). Current member of the main Avengers team.'   
            },
            {
                'Name': 'Thor',
                'Real Name': 'Thor Odinson (a.k.a. Dr. Donald Blake, Sigurd Jarlson, Jake Olsen, Odinson)',
                'Member Since': '1963',
                'Notes': 'Former member of the main Avengers team.',    
            },
            {
                'Name': 'Ant-Man',
                'Real Name': 'Dr. Henry Jonathan "Hank" Pym',
                'Member Since': '1963',
                'Notes': 'Became Giant-Man in Avengers #2 (1963), Goliath in Avengers #28 (1966), and Yellowjacket in Avengers #59 (1969). Expelled as Yellowjacket in Avengers #213 (1981). Joined West Coast Branch as Doctor Pym in West Coast Avengers #21 (1988). Became The Wasp in Mighty Avengers #21 (March 2009). He is one of only two members, the other being Kelsey Leigh (Captain Britain), who have Avengers status in both their civilian and superhero guises. Formerly the head of the Avengers Academy, former member of the Secret Avengers and formerly the leader of the Avengers A.I. Squad. Currently merged with Ultron.',
            }
        ];

        var factory = {
            getAvengers: getAvengers
        };

        function getAvengers() {
            return $q(function(resolve, reject) {
                resolve(avengers);
            });
        }

        return factory;
    }

Collectives™ on Stack Overflow

Getting data from .factory in AngularJS

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related