Using $http in Angular service for json data

Question

I'm having a issue with angular services. The code included are 2 factory services. The values in the services are used to populate a slider in view.

I've tried for a day before asking. I've reviewed a couple posts here stackoverflow post and the post linked.

The first function references a $http GET to a json file. The second function are the values hard coded.

The slider program is able to display the required fields from gloveSize() with no issue.

But putting the exact same info in a json file the slider issues undefined .

function glvType($http) {
        function getGloves() {
            return $http.get('./assets/test.json').success(function (data) {
                return data;
            })
        }

        return { getGloves:getGloves }
    }

    function gloveSize() {
        function getGloveSize() {
            return [{ value: '10.50', legend: 'Youth Baseball' },
                    { value: '11.00', legend: '2B/SS', id: 'bfbee3fb9893fc6d8555bbfa06176619' },
                    { value: '11.25' },
                    { value: '11.50', legend: 'Pitcher' },
                    { value: '11.75', legend: '3B/Pitcher' },
                    { value: '12.00' },
                    { value: '12.25', legend: 'Softball Inf' },
                    { value: '12.50', legend: 'Outfield' },
                    { value: '12.75', legend: 'OF/1st Base' },
                    { value: '13.00' }];
        }
        return { getGloveSize:getGloveSize }
    }

In the glvType function console.log of the data is there. In the controller,following answer from other posts, understanding the concept of promise functionality.

Array [ Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, 3 more… ]

$scope.product = gloveSize.getGloveSize();
$scope.glvSpec = glvType.getGloves().then(function (data) {

            $scope.gloveSpec = data;
            for (var i; i < $scope.gloveSpec; i++) {
                console.log($scope.gloveSpec[i].value);
            }

        });

From here, I tell the slider directive to pull array data from $scope.glvSpec, however the results contiue are undefined.

A console.log in the then(function) shows that the info is there.

Object { data: Array[13], status: 200, headers: fd/<(), config: Object, statusText: "OK" }

Lastly, the scope.product variable you see in code is how I pull the static function array into the controller. Adding this to the directive options, displays the values as designed.

Thanks for any guidance.

Answer 1

Change your getGloves() to return the $http call itself instead of using the success method to return data - then data will be available in your .then params:

function getGloves() {
    return $http.get('./assets/test.json');
}

Answer 2

Your loop needs to be fixed like so:

for (var i = 0; i < $scope.gloveSpec.length; i++) {
    console.log($scope.gloveSpec[i].value);
}

I've also put a plunker together for you to show you how you achieve this with angular.

Make your $http call in a service ( DataService ) and inject that into your component controller. Then you can ask the DataService for your data and handle accordingly.

http://plnkr.co/edit/ZJW12W4kk0paBshgtfIG?p=preview