AngularJS factory http returns empty

Question

I'm trying AngularJS for the first time. I'm getting JSON data from a http-get request using a factory, but the object is returned empty, before the ajax-request is done.

Factory:

myDemo.factory('photosFactory', function($http) {
    var photos = [];

    var factory = {};

    factory.getPhotos = function() {
        $http({
            url: 'content/test_data.json',
            method: 'GET'
        }).success(function(data, status, headers, config) {
            photos = data;
            return photos;
        });
    };
    return factory;
});

Controller:

controllers.AppCtrl = function($scope, $location, $http, photosFactory) {
    $scope.photos = [];
    init();
    function init() {
        $scope.photos = photosFactory.getPhotos();
    }
};

This is what I've come up with. When the controller set $scope.photos, the value is empty as if it returns the photos array before it get populated with the ajax response.

Aditya Singh · Accepted Answer · 2016-07-29 07:15:03Z

55

You should modify your code to return a promise and use the value in controller pls see dummy modified code

myDemo.factory('photosFactory', function($http) {
 return{
    getPhotos : function() {
        return $http({
            url: 'content/test_data.json',
            method: 'GET'
        })
    }
 }
});

and controller -

controllers.AppCtrl = function($scope, $location, $http, photosFactory) {
    $scope.photos = [];
    photosFactory.getPhotos().success(function(data){
       $scope.photos=data;
   });
};

edited Jul 29, 2016 at 7:15

Aditya Singh

9,6125 gold badges35 silver badges56 bronze badges

answered May 2, 2013 at 11:48

Ajay Singh Beniwal

19k11 gold badges84 silver badges100 bronze badges

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

1 Comment

Jason Brody Over a year ago

can i use this for post method?

sethbro · Accepted Answer · 2016-01-06 17:04:56Z

Using the q promise library means your success function can stay in your service:

app.factory('Data', function ($http, $q) {
    return {
        ajaxItems: function () {
            var deferred = $q.defer();
            $http({ method: "POST", url: "/Home/GetSearchResults" })
                .success(function (data, status, headers, config) {
                    deferred.resolve(data);
                }).error(function (data, status, headers, config) {
                    deferred.reject(status);
                });
            return deferred.promise;
        }
    }
});

app.controller('ResultsCtrl', ['$scope', 'Data', function ($scope, Data) {
    $scope.get = function () {
        $scope.items = Data.ajaxItems();
        //the model returns a promise and THEN items
        $scope.items.then(function (items) {
            $scope.items = items;
        }, function (status) {
            console.log(status);
        });
    };
}]);

Thanks for this. I think this is the best way of doing it. it keeps the controller lean.
How can we handle the error? What would be the value of items when there is an error?

Samir Alajmovic · Accepted Answer · 2015-02-08 19:34:47Z

7

Using the $resource will let you achieve what you want, plus give you much more control compared to $http

(Do not forget to include ngResrouce as a dependency to your app.)

myDemo.factory('photosFactory', function($resource) {
    var factory = {};

    factory.getPhotos = $resource('content/test_data.json', {}, {
        'query': {method: 'GET', isArray: true}
    });
    return factory;
});

controllers.AppCtrl = function($scope, $location, $http, photosFactory) {
    $scope.photos = [];
    init();
    function init() {
        $scope.photos = photosFactory.getPhotos.query();
    }
};

edited Feb 8, 2015 at 19:34

Samir Alajmovic

3,3033 gold badges29 silver badges28 bronze badges

answered May 2, 2013 at 11:57

Mark Coleman

40.9k9 gold badges84 silver badges101 bronze badges

2 Comments

user1121487 Over a year ago

What is the advantage of doing this compared to @Ajay beniwal answer?

Mark Coleman Over a year ago

When using $resource each of your photos are AngularJs resource objects that contain methods like $save $delete, it makes using Restful api a lot easier.

Collectives™ on Stack Overflow

AngularJS factory http returns empty

3 Answers 3

1 Comment

2 Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

2 Comments

Linked

Related