Cannot read property 'push' of undefined in AngularJS

Question

I have a factory that calls 4 json files and then I want to do some treatmenet for each data from these files and push them into an array of objects this is the code I wrote :

myapp.factory('wordsCloudFactory', function($http) {
    var factory = {
        getList: function() {

            return $http.get('data/periode_1_file.JSON')
                .then(function(response1) {
                    return $http.get('data/periode_2_file.JSON')
                        .then(function(response2) {
                            return $http.get('data/periode_3_file.JSON')
                                .then(function(response3) {
                                    return $http.get('data/periode_4_file.JSON')
                                        .then(function(response4) {
                                            var words = [{
                                                'period1': [],
                                                'period2': [],
                                                'period3': [],
                                                'period4': []
                                            }];
                                            console.log(words);
                                            for (var i = response1.data['X_id'].length - 1; i >= 0; i--) {
                                                words['period1'].push({
                                                    id: response.data['X_id'][i],
                                                    count: response.data['count'][i]
                                                });
                                            };
                                            for (var i = response2.data['X_id'].length - 1; i >= 0; i--) {
                                                words['period2'].push({
                                                    id: response.data['X_id'][i],
                                                    count: response.data['count'][i]
                                                });
                                            };
                                            for (var i = response3.data['X_id'].length - 1; i >= 0; i--) {
                                                words['period3'].push({
                                                    id: response.data['X_id'][i],
                                                    count: response.data['count'][i]
                                                });
                                            };
                                            for (var i = response4.data['X_id'].length - 1; i >= 0; i--) {
                                                words['period4'].push({
                                                    id: response.data['X_id'][i],
                                                    count: response.data['count'][i]
                                                });
                                            };
                                            return words;
                                        }, function(error) {
                                            return 'There was an error getting data';
                                        })

                                }, function(error) {
                                    return 'There was an error getting data';
                                })

                        }, function(error) {
                            return 'There was an error getting data';
                        })
                }, function(error) {
                    return 'There was an error getting data';
                })
        }
    };
    return factory;
})

this code it doesnt work it shows me an error message : 'Cannot read property 'push' of undefined'.

How can I solve this ?

As you can see in my code there are a lot of nested $http.get methodes isn't there another way to write that ?

Answer 1

Your words is an array of object

var words = [{
    'period1': [],
    'period2': [],
    'period3': [],
    'period4': []
}];

You have to access it by index.

Try like this

words[0]['period1'].push({
    id: response.data['X_id'][i],
    count: response.data['count'][i]
});

JSFIDDLE

If it's just an object Like

var words = {
    'period1': [],
    'period2': [],
    'period3': [],
    'period4': []
};

Then your push was ok .

words['period1'].push({
    id: response.data['X_id'][i],
    count: response.data['count'][i]
});

JSFIDDLE