Dynamically adding key/value pairs to Javascript object in a loop

Question

Looking to create an object of data in an angular factory i can return to a controller but having some issues:

app.factory('simpleFactory', function ($http) {
    var mykey = 'akjhas3892kh8adsak9';
    var apiResource = [{
        type: 'type1',
        abbr: 'abc'
    }, {
        type: 'type2',
        abbr: 'efg'
    }, {
        type: 'type3',
        abbr: 'hij'
    }];
    var data = {};
    var setDataKeyValues = function (key, value) {
        data[key] = value
    };
    for (var i = 0; i < apiResource.length; i++) {
        var key = apiResource[i].type;
        $http.get('http://api.com/v1/path/' + key + '/' + apiResource[i].abbr + '/anotherpath?apikey=' + mykey).success(function (info) {
            setDataKeyValues(key, info);
        });
    }
    return data;
});

The Angular http request is returning a JSON object, but when the data object is returned, it is empty. What is the correct why to add these key/values to this object?

Patrick Fisher · Accepted Answer · 2014-04-08 03:29:49Z

$http.get is asynchronous, and your return is synchronous. You need to use a queue. Angular has this built in.

app.factory('simpleFactory', function ($http) {
    ...
    var promises = [];
    for (var i = 0; i < apiResource.length; i++) {
        var key = apiResource[i].type;
        var promise = $http.get('http://api.com/v1/path/' + key + '/' + apiResource[i].abbr + '/anotherpath?apikey=' + mykey).success(function (info) {
            setDataKeyValues(key, info);
        });
        promises.push(promise);
    }

    // Once all asynchronous HTTP GET requests are complete
    $q.all(promises).then(function () {
        // Do something with the data, e.g.
        $rootScope.apply();
    });

   return data;
});

simpleFactory is a misnomer. The factory method synchronously returns an object, which is then provided wherever you inject it. The values you set in your callbacks will be available later.

Dov D. · Accepted Answer · 2014-04-08 02:57:24Z

0

Since the requests are asynchronous, the data values are only set after the callback runs, but you are returning data before any of the callbacks have a chance to run.

If you want to do something after all data has returned, increment a counter every time you request some data and decrement the counter after setting the data. Then check if the counter is at 0, and run the function that depends on the data.

edited Apr 8, 2014 at 2:57

answered Apr 8, 2014 at 2:51

Dov D.

5303 silver badges10 bronze badges

Collectives™ on Stack Overflow

Dynamically adding key/value pairs to Javascript object in a loop

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related