Angular service issue -- returning an array in a service containing promises

Question

As you can see this is my first time attempting this and I appear to be doing it incorrectly. I just want to take some code, consisting of promises and http requests, and put it in a service before the controller uses it. My goal is to simply clean up the controller so it doesn't contain all of that code.

After logging it in the last step of the controller the object appears as undefined. Also, all the requests are being made successfully. So, it's jumping through all the hoops fine so I'm guessing it must not be returning any value in the service and nothing gets passed on to the subsequent function in the controller. How can I return the 'people' array in the service after the promises have been fulfilled?

var myApp = angular.module('myApp', []);

myApp.controller('AppCtrl', function ($scope, $http, dataService) {

    var getPeople = function () {
        return $http.get('/getpeople');
    };

    getPeople().then(function (response) {
            dataService.compilePeople(response)
        })
        .then(function (people) {
            console.log(people);
            $scope.people = people;
        });

});

myApp.service('dataService', function ($q, $http) {

    this.compilePeople = function (response) {
        var people = [];
        names = response.data;
        grandPromiseArray = [];

        names.forEach(function (index) {
            var name = index,
                count = $q.defer(),
                skills = [],
                urls = '/getskillsbyname/' + name,
                urlc = '/getcountbyname/' + name;

            grandPromiseArray.push(
                $q.all([$http.get(urls), $http.get(urlc)])
                    .then(function (response) {
                        people.push({
                            name: name,
                            skills: response[0].data,
                            count: response[1].data
                        });

                    })
            );

        });
        return $q.all(grandPromiseArray).then(function () {
            return people
        });
    }
});

i thing you process all your logic from server not from client , when you call many ajax services always not get the best result you want by the asyncronus call — Enrique YC
– Enrique YC, Commented Feb 26, 2016 at 20:22
Which object is undefined? compilePeople returns a promise that cannot be undefined. — Pavel Voronin
– Pavel Voronin, Commented Feb 26, 2016 at 20:42

rob · Accepted Answer · 2016-02-26 20:51:43Z

2

You need to return the promise from compilePeople() in order for the people to be passed into the next .then() handler. so close ;)

getPeople()
    .then(function (response) {
        //You were missing this return
        return dataService.compilePeople(response)
    })
    .then(function (people) {
        console.log(people);
        $scope.people = people;
    });

answered Feb 26, 2016 at 20:51

rob

18.7k13 gold badges73 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular service issue -- returning an array in a service containing promises

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related