Return extended object in .map function from service to controller as promise

Question

What I am trying to get done is extend JSON object in service and then pass it to controller.

JSON came to service from another service which makes backend call.

The code is pretty complicated so I add comments and console.logs:

    //get games config object from another service
    gamesConfig: gamesConfigService.gamesConfig(),

    // prepare name of games icons. This is support function executed in next method
    transformSpace: function(subject) {
        var ensuredSubject = subject.toString().toLowerCase();
        var transformedSubject = ensuredSubject.replace(/ /g, '_');
        return transformedSubject;
    },

    //add iconname property to game config object
    extendGameConfig: function() {

        var that = this;

        this.gamesConfig
        .then(function (response) {

            console.log(response.data); // this works and console.log my JSON

            response.data.map(function(obj) {

                return new Promise(function(res){
                    angular.extend(obj, {
                        iconname: that.transformSpace(obj.attributes.name) + "_icon.png"
                    });
                });

            });

        }, function () {
            console.log('errror');
        });

This contains one support method transformSpace and main method which is not passing data correctly. ( I think )

I'm trying to receive this promise in controller by:

theService.getGamesObj.extendGameConfig()
    .then(function (response) {
        $scope.allGames = response;
        console.log($scope.allGames);
    }, function () {
        console.log('err')
    });

And then I'll use it in view. For now code above doesn't work and give me following error:

TypeError: Cannot read property 'then' of undefined

Answer 1

I've added comments where I think your code has gone wrong

extendGameConfig: function() {
    // ***********
    // use => functions, that = this wont be needed
    var that = this;
    // ***********
    // if you want this this function to return something, add a return 
    // this is why you get the 
    // Cannot read property 'then' of undefined error
    // as this function returns undefined
    this.gamesConfig
    .then(function (response) {

        console.log(response.data); // this works and console.log my JSON
        // ***********
        // you're using .map ... and discarding the result! 
        response.data.map(function(obj) {
            // ***********
            // you're creating a promise that never resolves!
            // also, why are you promisifying synchronous code?
            return new Promise(function(res){
                angular.extend(obj, {
                    iconname: that.transformSpace(obj.attributes.name) + "_icon.png"
                });
            });
        });
    }, function () {
        console.log('errror');
    });

so, try this

extendGameConfig: function() {
    return this.gamesConfig
    .then(response => {
        return response.data.map(obj => {
            return angular.extend(obj, {iconname: this.transformSpace(obj.attributes.name) + "_icon.png"});
        });
    }, function () {
        console.log('errror');
    });

or, better yet

extendGameConfig: function() {
    return this.gamesConfig
    .then(response => 
        response.data.map(obj => 
            angular.extend(obj, {iconname: this.transformSpace(obj.attributes.name) + "_icon.png"})
        )
    )
    .catch(function (err) {
        console.log('error', err);
        throw err; // log the error, but you'll probably want to reject this promise so the calling code doesn't think there is success?
    });
}