Pass the extended object from the service to the controller within a promise using the .map function

Question

Pass the extended object from the service to the controller within a promise using the .map function

section: I am currently working on extending a JSON object within a service and passing it to a controller. The JSON originally came to the service from another service that makes backend calls. The code is quite intricate, so I've added comments and console.logs for clarity:


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

    // Prepare the names of game icons. This support function will be executed in the next method
    transformSpace: function(subject) {
        var ensuredSubject = subject.toString().toLowerCase();
        var transformedSubject = ensuredSubject.replace(/ /g, '_');
        return transformedSubject;
    },

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

        var that = this;

        this.gamesConfig
        .then(function (response) {

            console.log(response.data); // Successfully logs the JSON data

            response.data.map(function(obj) {

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

            });

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

This code includes a support method transformSpace and a main method that seems to have issues passing data correctly (at least, that's what I think). I am attempting to retrieve this promise in the controller using the following code:

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

I plan to use the data in the view. However, the current code is not functioning as expected and is returning the following error:

TypeError: Cannot read property 'then' of undefined

javascript angularjs json promise

Answer 1

Answer №1

I have identified the sections in your code where errors seem to be occurring

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');
    });

Therefore, it is recommended to try the following fixes

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, an even better approach

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?
    });
}

Answer 2

I have identified the sections in your code where errors seem to be occurring

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');
    });

Therefore, it is recommended to try the following fixes

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, an even better approach

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?
    });
}

Pass the extended object from the service to the controller within a promise using the .map function

Answer №1

Similar questions

How can I modify the activate_url for django-allauth?

Axios is causing my Pokemon state elements to render in a jumbled order

Loss of precision occurs when converting a BigDecimal value from a JSON

A guide to increasing a loop counter in Vue

Differences between REST web services and JSON services

Is it possible to implement jQuery events on all elements belonging to a specific class

Problem with sequential promises

I am currently dedicated to enhancing my background transitions and experimenting with creating smooth fade-ins

Trouble with Displaying HTML Table in Bootstrap 4.3.1 Tooltip

Tips for showing a single table with buttons on display

Combining Framer Motion with Next.js: Resolving conflicts between layoutId and initial props in page transitions

Updating the background image without having to validate the cache

What is the best way to successfully send an object through AJAX once all its updates are completed?

Exploring the power of async/await in combination with map or foreach

javascript various backgrounds on click

What is the process for incorporating a new URL into the routes.js file of a preexisting Node.js project that was developed with locomotive?

Having issues with Sencha Touch not initiating in mobile browsers

Routing in Next.js to create custom URL slugs for usernames, like (site.com/username), is a

Having trouble with my Express.js logout route not redirecting, how can I troubleshoot and resolve it?

Array with multiple dimensions using commas as delimiters