Http Status Code Factory AngularJs

Question

I am new to using AngularJs and I have created a simple factory using $http get and it gets a .json that has a bunch or http status code numbers as keys, and their respective messages as values. I for some reason contine to get this error:

Cannot read property 'get' of undefined

json:

{
    "200": "Ok",
    "201": "Created",
    "202": "Accepted",
    "404": "Not_Found",
    "400": "Bad Request",
    "403": "Forbidden",
    "417": "Expectation Failed"
}

factory.js

  .factory('statusCodesFactory', function () {

                var httpStatusCodes = {
                    getStatus: function ($http) {
                        $http.get('catalog/statusCodes.json')
                            .then(function (response) {
                               httpStatusCodes.code = response;
                            });
                    }
                }
                return httpStatusCodes;
            })

MBielski · Accepted Answer · 2016-05-03T17:10:08.700

5

You need to pass in the dependency for '$http' properly.

.factory('statusCodesFactory', ['$http', function ($http) {
    var httpStatusCodes = {
        getStatus: function () {
            $http.get('catalog/statusCodes.json')
                .then(function (response) {
                    httpStatusCodes.code = response;
                });
            }
        }
        return httpStatusCodes;
    });

This being said, your function is not really returning anything. A better format for it would be this:

.factory('statusCodesFactory', ['$http', function ($http) {
    var httpStatusCodes = {
        getStatus: function () {
            return $http.get('catalog/statusCodes.json')
                .then(function (response) {
                    return response;
                });
            }
        }
        return httpStatusCodes;
    });

Called like this:

var statusCodes = {};
statusCodesFactory.getStatus().then(function(response){
    statusCodes = response;
});

edited May 03 '16 at 17:10

answered May 02 '16 at 18:01

MBielski

6,628
3
32
43

followed your example and where I am calling my factory I logged console.log(statusCodesFactory.getStatus()); and it says undefined. – user2402107 May 02 '16 at 18:43
1

Without some way to resolve that promise, yes, I would expect that. Using console.log will not resolve the promise within the function. – MBielski May 02 '16 at 18:53
How do I get the data out of the promise? – user2402107 May 03 '16 at 16:42
var statusCodes outside of the promise is undefined. – user2402107 May 03 '16 at 16:46
I've updated the declared value for statusCodes. Until the promise resolves, it will be an empty object. Once the promise resolves it should contain the values that were returned. If you need this to be present when a controller loads on a page, I would load this list in the `.run()` section of your app as I don't see why it would change on a frequent basis. – MBielski May 03 '16 at 17:13

Dharmendra Poonia · Answer 2 · 2016-05-02T19:24:59.657

1

Inject $http service to your factory.

.factory('statusCodesFactory', ['$http', function ($http) {
    return {
        getStatus: function () {
           $http.get('catalog/statusCodes.json')
                .success(function (response) {
                    // 
                });
            }
        }
    };
}]);

Invoke function as -

statusCodesFactory.getStatus();

If you need to return response back to controller then use Promises. Inject $q service -

.factory('statusCodesFactory', ['$http', '$q', function ($http, $q) {
    return {
        getStatus: function () {
           var defer = $q.defer();
           $http.get('catalog/statusCodes.json')
                .success(function (response) {
                    defer.resolve(response);
                });
            }
           return defer.promise;
        }
    };
}]);

Then call factory method from controller as -

statusCodesFactory.getStatus().then(function(response){
    // Use response
});

edited May 02 '16 at 19:24

answered May 02 '16 at 19:09

Dharmendra Poonia

291
1
4

@user2402107 You have to use promises, to get the response back. Just use second approach, the '$q' one. – Dharmendra Poonia May 02 '16 at 19:38
This uses the promise anti-pattern (which is not a good thing,) but is otherwise correct. – MBielski May 02 '16 at 19:55
Deferred promise anti-pattern: http://stackoverflow.com/questions/31024021/create-promise-in-angularjs – MBielski May 02 '16 at 20:00

score 0 · Answer 3 · answered May 02 '16 at 18:06

The error is saying that you cannot call the method get on $http because $http is undefined. The $http parameter being passed to getStatus: function($http)... is the root of this problem. You need to figure out what is being passed to that function, and why is is an empty object.

Http Status Code Factory AngularJs

3 Answers3