using angular factory with $http

Question

I need translate value factory. this factory receive translateData from server. and angular controller call convertValue function. but $http is async method so controller get undefined value. because http response not yet received.

I wonder that I can factory initialize complete(= download data from server) and create controller sequentially.

angular.module("app")
.factory("service", function ($http) {
    var allDataMap = {};

    $http({
        method: 'GET',
        url: '/data'
    }).then(function (response) {
        angular.forEach(response.data.datas, function (value) {
            allDataMap[value.key] = value.value;
        });
    });


    return {
        convertValue: function (key) {
            return key + '(' + allDataMap[key] + ')';
        },  
    };
});

We do not write business logic in factory. That just acts as a data access layer. You should be calling api and return that promise object to controller so that the `then` implementation is in controller itself. — Ankit Agarwal, Nov 02 '18 at 08:18

score 0 · Answer 1 · answered Nov 02 '18 at 08:57

You're thinking of async call to be accomplish in sync way. That won't happen, you have to wait until the ajax call is done, you can easily make this happen using promise.

angular.module("app")
.factory("service", function ($http) {
    var allDataMap = {};
    // create a promise
    var promise = $http({
        method: 'GET',
        url: '/data'
    }).then(function (response) {
        angular.forEach(response.data.datas, function (value) {
            allDataMap[value.key] = value.value;
        });
        return allDataMap;
    });


    return {
        convertValue: function (key) {
            // wait until promise finish 
            return promise.then(function() {
               return key + '(' + allDataMap[key] + ')';
            });
        },  
    };
});

using angular factory with $http

1 Answers1