Struggling with grasping the concept of promises in AngularJS

Question

Struggling with grasping the concept of promises in AngularJS

I encountered a challenge while working with AngularJS & REST. My data service was not returning data in time for my model to use, despite implementing a promise.

I would greatly appreciate any assistance from those more knowledgeable on this matter.

In my routing, a booking Id is passed to the bookingController. This controller retrieves booking details and displays them in an editable form in the booking.html template.

testLabApp.controller('bookingController', function ($q, $scope, $location, $window, $routeParams, service) {
if ($routeParams.id) {
    $scope.bId = $routeParams.id;

    // I set up a promise here
    var bookdefer = $q.defer();
    bookdefer.promise
        .then(function (booking) {

            $scope.booking = booking;

            $scope.editableBooking = angular.copy($scope.booking);

            console.log("[bookingCtrl] 1 New: " + $scope.booking.Storeno + " and Editable: " + $scope.editableBooking.Storeno);
        });

    bookdefer.resolve(service.getBooking($scope.bookingId));

}
else {
    //...
}

When the code reaches '[bookingCtrl] 1...', it throws an error "TypeError: Unable to get property 'Storeno' of undefined or null reference," indicating that the booking data may not have been retrieved yet.

The console then shows:

[getBooking] Done = Id: 209 | Store no: 9180 | Description: test | Status: Booked

My data service consists of functions that make REST calls:

testLabApp.factory('service', ['$rootScope', '$http', function ($rootScope, $http) {
    var service = {};

    $http({
        method: 'GET',
        url: "/_api/web/lists/GetByTitle('Bookings')/Items?$filter=Id eq '" + bookingId + "'",
        headers: {
            'Accept': 'application/json; odata=verbose'
        },
    }).success(function (d) {
        var e = d.d.results[0];
        booking = {
            Id: e['Id'],
            Storeno: e['Title'],
            BookedBy: e['BookedBy'],
            Description: e['Description'],
            StartDate: e['StartDate'],
            EndDate: e['EndDate'],
            Status: e['Status']
        };
        console.log("[getBooking] Done = Id: " + booking.Id + " | Store no: " + booking.Storeno + " | Description: " + booking.Description + " | Status: " + booking.Status);

        return booking;

    }).error(function (er) {
        console.log("[getBooking] http error : " + er);
    });
};

Any guidance or suggestions would be highly appreciated.

Regards, Craig

javascript angularjs rest angular-promise

Answer 1

Answer №1

When the success function of your service is triggered asynchronously, it results in null being returned to the controller. In all of my Angular projects, I have implemented the following approach:

service.fetchData = function(id) {
    var deferred = $q.defer();

    $http({
        method: 'GET',
        url: '/api/some-end-point/id'
    }).then(function(response) {
        var result = response.data;
        deferred.resolve(result);
    }, function(error) {
        $log.error(error);
        deferred.reject(error);
    });
    return deferred.promise;
}

The controllers are structured as follows:

if ($routeParams.id) {
    $scope.itemId = $routeParams.id;

    //Expecting this line to initiate the promise
    service.fetchData($routeParams.id).then(
        function(response){
            $scope.item = response;
        },
        function(error){
            console.log(error);
        }
    );
}

Answer 2

When the success function of your service is triggered asynchronously, it results in null being returned to the controller. In all of my Angular projects, I have implemented the following approach:

service.fetchData = function(id) {
    var deferred = $q.defer();

    $http({
        method: 'GET',
        url: '/api/some-end-point/id'
    }).then(function(response) {
        var result = response.data;
        deferred.resolve(result);
    }, function(error) {
        $log.error(error);
        deferred.reject(error);
    });
    return deferred.promise;
}

The controllers are structured as follows:

if ($routeParams.id) {
    $scope.itemId = $routeParams.id;

    //Expecting this line to initiate the promise
    service.fetchData($routeParams.id).then(
        function(response){
            $scope.item = response;
        },
        function(error){
            console.log(error);
        }
    );
}

Answer 3

Answer №2

'Here is a sample of an asynchronous GET request made from a controller using a service. Instead of creating a new deferred object, you can simply return $http.get() to your controller:

(function(){

  angular.module('app', []);


  angular.module('app').factory('service', ['$http', function($http){

    return {
      fetchData: fetchData;
    }

    function fetchData(){
      return $http.get('/url')
        .success(function(data){
          //Implement business logic here
          return data;
        })
        .error(function(error){
          return error;
        });
    }

  }]);

  angular.module('app').controller('controller', ['$scope', 'service',  function($scope, service){

    service.fetchData()
      .then(function(response){
        $scope.data = response.data;
      })
      .catch(function(error){
        //Handle errors here
      });
  }]);

})();

Answer 4

'Here is a sample of an asynchronous GET request made from a controller using a service. Instead of creating a new deferred object, you can simply return $http.get() to your controller:

(function(){

  angular.module('app', []);


  angular.module('app').factory('service', ['$http', function($http){

    return {
      fetchData: fetchData;
    }

    function fetchData(){
      return $http.get('/url')
        .success(function(data){
          //Implement business logic here
          return data;
        })
        .error(function(error){
          return error;
        });
    }

  }]);

  angular.module('app').controller('controller', ['$scope', 'service',  function($scope, service){

    service.fetchData()
      .then(function(response){
        $scope.data = response.data;
      })
      .catch(function(error){
        //Handle errors here
      });
  }]);

})();

Struggling with grasping the concept of promises in AngularJS

Answer №1

Answer №2

Similar questions

Error Alert: Invalid Hook Call detected while using the useSelector hook within a Functional Component

Choosing a request date that falls within a specified range of dates in PHP Laravel

Storing array values in a MySQL database within the Laravel framework

What is the process of creating and customizing popovers in Bootstrap 5 with jquery?

Managing the transition of the object in question

I encountered an issue when attempting to execute an action as I received an error message indicating that the dispatch function was not

Displaying elapsed time in JavaScript (Node.js)

Mistake in Resource URL for BreezeJS using C# WebAPI with OData

Applying specific style properties in styled-components can vary based on certain conditions

Transform a checkbox input into two distinct buttons

Having trouble with Vuejs Ternary Operator or Conditional in v-bind-style?

I was unable to produce the result of the input value entered at the bottom

What are the steps to make a basic slider with jQuery without using plugins?

Having trouble with the rendering of the Stripe Element Quickstart example

Guidelines on incorporating a dynamically selected option into a dynamically populated dropdown menu

Could offering a Promise as a module's export be considered a legitimate approach for asynchronous initialization in a Node.js environment?

Highcharts introduces shared tooltips for specific data series

Saving the state of checkboxes in Angular Material

JS How can I generate individual buttons in a loop that trigger separate actions?

Does Objective C have a counterpart to the encode() method in JavaScript?