AngularJS promises are known for returning the object itself instead of just the resolved value

Question

AngularJS promises are known for returning the object itself instead of just the resolved value

function getBusTimetable() {
  var waiting = $q.defer();

  var busData = $http.get('https://bus.data.je/latest');

  busData.success(function(response) {
    waiting.resolve(response);
  });

  busData.error(function(error) {
    waiting.reject(error);
  });

  return {
    getAllTimes: function() {
      return waiting.promise;
    },

    filterByTimetableType: function(type) {
      _data = waiting.promise;
      return _data.filter(function (el) {
        el = el[0];
        return el.MonitoredVehicleJourney.DirectionRef == type;
      });
    }
  }
}

When I call either of the above functions, it returns a promise object with methods like finally, catch, and then, instead of the actual resolved value. How can I correct this behavior?

javascript angularjs angular-promise

Answer 1

Answer №1

The best approach is to create your own API that handles promises:

function display() {
    var deferred = $q.defer();

    var data = $http.get('https://bus.data.je/latest');

    data.success(function(_data) {
        deferred.resolve(_data);
    });

    data.error(function(error) {
        deferred.reject(error);
    });

    return {
        all: function() {
            return deferred.promise;
        },

        schedule: function(type) {
            return deferred.promise.then(function (data) {
                return data.filter(function (el) {
                    el = el[0];
                    return el.MonitoredVehicleJourney.DirectionRef == type;
                });
            });
        }
    }
}

You can then use it in this way:

display.schedule().then(function (schedules) { /* interact with the schedules here */ });

Attempting to make promises synchronous retroactively, as mentioned in the comments, is not possible.

Answer 2

The best approach is to create your own API that handles promises:

function display() {
    var deferred = $q.defer();

    var data = $http.get('https://bus.data.je/latest');

    data.success(function(_data) {
        deferred.resolve(_data);
    });

    data.error(function(error) {
        deferred.reject(error);
    });

    return {
        all: function() {
            return deferred.promise;
        },

        schedule: function(type) {
            return deferred.promise.then(function (data) {
                return data.filter(function (el) {
                    el = el[0];
                    return el.MonitoredVehicleJourney.DirectionRef == type;
                });
            });
        }
    }
}

You can then use it in this way:

display.schedule().then(function (schedules) { /* interact with the schedules here */ });

Attempting to make promises synchronous retroactively, as mentioned in the comments, is not possible.

AngularJS promises are known for returning the object itself instead of just the resolved value

Answer №1

Similar questions

Combining various API requests within a Vue component, which includes a for loop

Ways to eliminate double slashes from URL in Next Js. Techniques for intercepting and editing a request on the server side using getServerSideProps

Display the preset user coordinates on the map using AngularJS

Using React.js to add MongoDB documents into the database

Ways to retrieve JSON string from responsetext in JavaScript

The powers of jQuery and CSS selectors

Has a newly created element been styled or are all values set to default since it is outside of the DOM?

Issues with data not being successfully transferred between controllers in my service

Delete a class that is not identified by the DOM

Unable to adjust the width of the react-select component

The parameter provided should be in the form of a 12-byte string

Exploring the feature of setting the checked state in Radio.Group using Antd

What are the steps to convert a canvas element, using an image provided by ImageService as a background, into a downloadable image?

Unable to alter state from the onClick event of a dialog button

Maximizing the performance of plotting hundreds or thousands of series in a 2D scatter or line chart using Echarts

Update the div element without needing to reload the entire page

Deactivate background hover effects for bar charts in Recharts

When creating a new instance of the Date object in Javascript, the constructor will output a date that is

The function will not be triggered when the form is submitted

What is the best way to send data from a child functional component to a parent class component?