Angular is patiently waiting for the Ajax service function to finish executing

Question

Angular is patiently waiting for the Ajax service function to finish executing

Seeking help on retrieving the result of an $http request from my controller.

Below is my service code :

.service('postService', function($http, apiUrl) {

    return {
        post: function(uri, params) {
            $http.post(apiUrl + uri, params).then(function(items) {                 
                    return items.data;
            });
        }
    };
})

And here is my controller implementation :

var fetchResult = postService.post('my_service_url', {id: 'test'});
fetchResult.then(function(result) {
       $scope.data = result;
       console.log(data);
});

Encountering an error message:

getData is undefined

Any recommendations on how to resolve this issue?

javascript angularjs

Answer 1

Answer №1

To successfully complete the API call, make sure to return the $http.post

return {
    post: function(endpoint, data) {
        return $http.post(apiUrl + endpoint, data);
    }
};

Next, don't forget to set up the then function:

var response = postService.post('my_service_url', {id: 'test'});
response.then(function(result) {
       $scope.resultData = result;
       console.log(resultData);
});

Answer 2

To successfully complete the API call, make sure to return the $http.post

return {
    post: function(endpoint, data) {
        return $http.post(apiUrl + endpoint, data);
    }
};

Next, don't forget to set up the then function:

var response = postService.post('my_service_url', {id: 'test'});
response.then(function(result) {
       $scope.resultData = result;
       console.log(resultData);
});

Answer 3

Answer №2

Give it a shot using the $q module in AngularJS:

https://angular.io/api/ng/service/$q

This is an example of how your service code could be structured:

.service('postDataService', function($http, $q, apiUrl) {

    return {
        post: function(endpoint, data) {
            var deferred = $q.defer();

            $http.post(apiUrl + endpoint, data).then(function(response) {                 
                    deferred.resolve(response.data);
            }, function() {
                // handle errors
                    deferred.reject();
            });

            return deferred.promise;
        }
    };
})

Answer 4

Give it a shot using the $q module in AngularJS:

https://angular.io/api/ng/service/$q

This is an example of how your service code could be structured:

.service('postDataService', function($http, $q, apiUrl) {

    return {
        post: function(endpoint, data) {
            var deferred = $q.defer();

            $http.post(apiUrl + endpoint, data).then(function(response) {                 
                    deferred.resolve(response.data);
            }, function() {
                // handle errors
                    deferred.reject();
            });

            return deferred.promise;
        }
    };
})

Angular is patiently waiting for the Ajax service function to finish executing

Answer №1

Answer №2

Similar questions

When using React, it's important to verify if the page has been refreshed before updating the local storage based on the GraphQL query. If the page

Send an API call for every item in a given list

The JQuery parseFloat() function seems to be consistently returning "NAN" whenever it is used with the .text property

Extracting data from websites by manipulating the Document Object Model with the help of Javascript and Ajax

What is the process for obtaining the number of video views using the YouTube API?

How can I change the transparency of a CSS background color using JavaScript?

Utilizing db.system.js Function within the $where Clause

Update data in Angular pagination when clicked on

What is the method for applying the action (hide) to every table cell that doesn't include a specific string in its ID?

Countdown component in Ant Design failing to display correct date

Embedding links in v-bind:href

Guidelines for securing login access where the "IsApproved" field must be true before authorization

Issue: Connection Problem in React, Express, Axios

The inner workings of v8's fast object storage method

Having difficulty loading the JSON configuration file with nconf

What are some methods for transferring the state variable's value from one component to another in React?

Changes have been made to the Vue object, however, it does not trigger a re-render

Navigating through props outside a class component in React

Fullcalendar JS will easily identify dates with events, allowing users to simply click on those dates to redirect to a specific URL

Swap a jQuery class with another if the class for ul li is currently active