Using $http inside custom factory service

Question

I have two functions on my service. One just returns a string which works fine and displays on the view perfect. But the other function does a $http call to the backend. The $http call works fine but am not able to pull the results through to the controller

(function(){

var videoStoreApp = angular.module('videoStoreApp', ['ui.router']);


videoStoreApp.factory('videoListService', function($http, $rootScope){

    var myService = {};   

    myService.getData = function()
    {           

        return $http({
           method: 'GET',
           url: 'app/services/getDvd.php'
        }).then(function(data){                          
             var returnObj = {
                 complete:true,
                 data: data.data
             };
             return returnObj;
        });       
    };   

    myService.getSum =  function()
    {
        return 'services test';
    };

    return myService;
});
})();

This is how i call the service from the controller...

angular.module('videoStoreApp').component('videoList', {

    templateUrl: 'app/views/videoList.html',
    controller: function videoListFunction($http,$scope,videoListService){

    $scope.test3 = videoListService.getSum();
    $scope.dvd =  videoListService.getData();
 };
}
});

Can someone please help. This my first time posting a question on stack over flow

Welcome to StackOverflow. Could you please clarify what question you have and whether there are any error messages that occur with this code? — Steve-o169, Mar 05 '19 at 13:52

score 0 · Answer 1 · answered Mar 05 '19 at 13:38

0

I think you should replace this line

$scope.dvd =  videoListService.getData();

with this

videoListService.getData().then(function(data){
    $scope.dvd = data;
});

Because, myService.getData returns a promise. You probably don't need a promise, but you need a value. The value you need will be available inside then function of the promise as soon as the promise resolves.

answered Mar 05 '19 at 13:38

Emre Erdoğan

119
4

I tried but it still does the same thing. The data is definitely returned from the $http call. Because when i put a break point on line " return returnObj;" thw object is populated with data. but in my component controller it remains undefined. – Lyle Phillips Mar 05 '19 at 13:54
So i checked again and $scope.dvd is populated with the data but its stil not displaying in the markup. here is the markup. – Lyle Phillips Mar 05 '19 at 14:02
@LylePhillips What's the structure of the data you're expecting from the server? Is it an array or an object? By the way, you're using `$ctrl.dvd` in ng-repeat, so you should use `$ctrl.dvd` instead of `$scope.dvd` in your controller. – Emre Erdoğan Mar 05 '19 at 14:09
I dont understand, whats the difference between $scope and $ctrl. All of the controller members should be available in the view right? – Lyle Phillips Mar 05 '19 at 14:13
The data is in json format and its an array of objects – Lyle Phillips Mar 05 '19 at 14:14

score 0 · Answer 2 · answered Mar 05 '19 at 14:10

0

Here is the mark-up

            <ul>
                <li ng-repeat="dvd in $ctrl.dvd">
                    <a href="" ng-click="selectMovie(dvd.film_id)">{{dvd.title}}</a>                        
                </li>
            </ul>

answered Mar 05 '19 at 14:10

Lyle Phillips

197
4
13

Using $http inside custom factory service

2 Answers2