What is the process for sending a response back to a function from .then() in Angular?

Question

What is the process for sending a response back to a function from .then() in Angular?

When the html calls check(), it should return either true or false.

ng-class="{'timeline-inverted: check(id)'}"

The server script's $scope.server.get() retrieves a result(r) from the server, which needs to be returned to the check() function as $scope.result.

Below is my Angular code:

$scope.check = _.memoize(function(userId) {
    $scope.server.get({
        action: 'checkif',
        userID: userId
    }).then(function successHandler(r) {
        $scope.result = r.data.result;
    });
    return $scope.result;   // $scope.result is currently undefined
});

javascript angularjs http get response

Answer 1

Answer №1

Generate a fresh Promise that is only resolved once the HTTP request is completed successfully.

$scope.verify = _.memoize(function(userId) {
  return new Promise((resolve, reject) => {
    $scope.server.get({
      action: 'verifyUser',
      userID: userId
    }).then(function successfulResponseHandler(r) {
      resolve(r.data.result);
    });
  });
});

Answer 2

Generate a fresh Promise that is only resolved once the HTTP request is completed successfully.

$scope.verify = _.memoize(function(userId) {
  return new Promise((resolve, reject) => {
    $scope.server.get({
      action: 'verifyUser',
      userID: userId
    }).then(function successfulResponseHandler(r) {
      resolve(r.data.result);
    });
  });
});

Answer 3

Answer №2

It may not be advisable to use memoize in this scenario, as it works well with primitive types but the API call might return different data sets for the same userId and action parameters!

Consider moving your $http call from being bound to an $scope to a service for better organization. Your application structure could be enhanced like this:

var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', function($scope, user) {

   $scope.userData = null;

   user.get('checkif', 2).then(function (result) {
      $scope.userData = result.data.result;
   });
});


myApp.service('user', function () {
  this.get = function (action, userId) {
    return $http({
      url: 'http://your-api-endpoint/',
      method: 'GET',
      params: {
        action: action,
        userID: userId
      }
    });
  }
});

Answer 4

It may not be advisable to use memoize in this scenario, as it works well with primitive types but the API call might return different data sets for the same userId and action parameters!

Consider moving your $http call from being bound to an $scope to a service for better organization. Your application structure could be enhanced like this:

var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', function($scope, user) {

   $scope.userData = null;

   user.get('checkif', 2).then(function (result) {
      $scope.userData = result.data.result;
   });
});


myApp.service('user', function () {
  this.get = function (action, userId) {
    return $http({
      url: 'http://your-api-endpoint/',
      method: 'GET',
      params: {
        action: action,
        userID: userId
      }
    });
  }
});

What is the process for sending a response back to a function from .then() in Angular?

Answer №1

Answer №2

Similar questions

Utilizing data attributes to configure jQuery plugin settings

`I'm experiencing issues with my AJAX call when using Django`

Unable to retrieve data from MySQL Database using Express Route

Create a Sleek Dropdown Navigation Menu with MaterializeCSS in WordPress

Can you please explain the concept of a state provider and root provider in a library file where it is

Maintain parental visibility with children when navigating to a different page

Error encountered: Jquery counter plugin Uncaught TypeError

The Stylish Choice: Materialize CSS Dropdown Selector

Manipulate private variables in Java

The backtick is not functioning correctly when trying to append the result in the Internet Explorer browser

Incorporating Restangular data into the $scope object for a collection

Guide on creating a dynamic line segment in real-time with three.js

Tips for concealing an input IP Address in React

Tips for transferring data between two forms in separate iFrames

Mapping Dropdown values into another dropdown within AngularJS

Observable - transforming two promises into an observable stream

What is the most effective method for declaring callbacks on objects in Typescript?

Steps for displaying a customized view within an NPM module:

Attempting to implement a unique filter on an ng-repeat that was crafted with creativity

React Select value remains unchanged after state modification