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.

score 0 · Answer 1 · answered Nov 23 '16 at 17:32

0

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');
}

answered Nov 23 '16 at 17:32

A Macdonald

814
1
7
10

Thanks.. I made the change, however still undefined. Console.log on the change reports the array info is there. I removed the 'then' statement and remainder of function and results are the same. – user3200548 Nov 23 '16 at 17:39
aha shouldn't it be $scope.gloveSpec = data.data; as the $http response returns your data in a property called data – A Macdonald Nov 23 '16 at 17:45
I changed the controller variable to $scope.glvSpec = glvType.getGloves(); To reference the service results directly.. The same as the static data entry that works, but nothing.. The reason why I want the file is because the object properties are quite long. Sure I can just manually enter, but where is the fun in that. – user3200548 Nov 23 '16 at 17:56
I changed the controller variable to $scope.glvSpec = glvType.getGloves(); To reference the service results directly.. The same as the static data entry that works, but nothing.. The reason why I want the file is because the object properties are quite long. Sure I can just manually enter, but where is the fun in that. I wrote a codepen of the issue [link](http://codepen.io/jacobsultd/pen/XNRQjo). CSS not working, dont know why.. If you change line 112 (js) to stepArray: $scope.glvSpec you get the undefined. It is currently using the static data. – user3200548 Nov 23 '16 at 18:06
I think you may have misunderstood my last comment about data.data - I modified the codepen a little [here](http://codepen.io/anon/pen/wodLvV) – A Macdonald Nov 23 '16 at 20:03

score 0 · Answer 2 · answered Nov 23 '16 at 18:08

0

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

answered Nov 23 '16 at 18:08

Jimmy

428
5
19

Thanks for contrib.. But I seem to get no results. I used your plunket template and entered all relevant info. I changed the template entry to use a file called wizard. but I get no results.. [link](http://plnkr.co/edit/sHwtNKgJtqcpicUqFSg9?p=preview) – user3200548 Nov 23 '16 at 19:23
There was a few things wrong with your plunker. In the component definition, it's `templateUrl`. When we want to bind to values in our template we use `$ctrl.` I've made those updates here: http://plnkr.co/edit/XwE52jQmiaGoheFoicSM?p=preview - I've also declared the `vm.search` function referenced in `onChange` in your steps object and called getData() in `stepsArray` – Jimmy Nov 23 '16 at 20:28
Thanks for the edits but they reveal nothing. I reworked plunker my original code [link](http://plnkr.co/edit/JaiWLgTOretjpPRFwkX8?p=preview). I found an example that simply $http.get the data from a file. a scope variable that takes the returned data and place it in a variable. Now I did this two ways, I declared predefined var, prior to success function that binds data to it. I placed con.logs after 1st dec, success function & 3rd. the log. 1st is undefined, 3rd is undefined,success has objects, in this order. I tried $scope.$apply() within success after seeing the order of the log. No dice – user3200548 Nov 24 '16 at 14:02
I'm going to drop for now and just put values static in a file and declare the variable with them and attach to the web page. This will nag me, but I spent to much time on this and have to move on. – user3200548 Nov 24 '16 at 14:04

Using $http in Angular service for json data

2 Answers2