Building a conditional promise in AngularJS

Question

Building a conditional promise in AngularJS

My scenario involves retrieving an items array from localStorage.

var items = JSON.parse($window.localStorage.selectedResources)['server'];

var arr = [];

var idsArray = [];

angular.forEach(items, function (item) {
    idsArray.push(item.id);
});

After collecting the item IDs, I initiate an API call...

//Make the API call
ds.getBillInfo(idsArray)
.then(function(response){
    var serversList = [];
    for (var key in response) {
        // iterate over response

The issue arises when the items array is empty, causing idsArray to also be empty. This results in an error stating

Cannot read property 'then' of undefined

.

I aim to execute the lines inside the then block even if idsArray is empty as if there is no promise involved.

EDIT

When using

$q.all([ds.getBillInfo(idsArray)])

, the error disappears.

The definition of getBillInfo() function is as follows:

this.getBillInfo = function(idsArray){
    if(!idsArray.length) return;
    var segmentUrl = '';
    for(var i =0;i<idsArray.length;i++){
        if(i != (idsArray.length-1))
            segmentUrl += 'ids='+idsArray[i]+'&';
        else
            segmentUrl += 'ids='+idsArray[i];
    }
    return HttpWrapper.send('/api/bill?bill=t&'+segmentUrl, {"operation": 'GET'});
};

javascript angularjs

Answer 1

Answer №1

When working with the getBillInfo function, it is recommended to encapsulate your logic within a new Promise object and resolve it in case of an empty array.

For example:

self.getBillInfo = function(array){

  var deferred = $q.defer();

  if(array.length == 0){
     deferred.resolve([]); // return an empty list
  }
  else{
    var segmentUrl = '';
    for(var i =0;i<idsArray.length;i++){
         if(i != (idsArray.length-1))
            segmentUrl += 'ids='+idsArray[i]+'&';
         else
            segmentUrl += 'ids='+idsArray[i];
        }
       HttpWrapper.send('/api/bill?bill=t&'+segmentUrl, {"operation": 'GET'})
         .then(function (response) {
              deferred.resolve(response.data); 
         }
         , function (error) {
              deferred.reject(error);
         });

  } 

  return deferred.promise;
}

[EDIT]

In response to @JC Ford's suggestion, considering that HttpWrapper already returns a Promise, we can simplify the logic as follows:

self.getBillInfo = function(array){

  if(array.length == 0){
     return $q.resolve([]); // return an empty list;
  }
  else{
    var segmentUrl = '';
    for(var i =0;i<idsArray.length;i++){
         if(i != (idsArray.length-1))
            segmentUrl += 'ids='+idsArray[i]+'&';
         else
            segmentUrl += 'ids='+idsArray[i];
        }
       return HttpWrapper.send('/api/bill?bill=t&'+segmentUrl, {"operation": 'GET'});        
  } 
}

Answer 2

When working with the getBillInfo function, it is recommended to encapsulate your logic within a new Promise object and resolve it in case of an empty array.

For example:

self.getBillInfo = function(array){

  var deferred = $q.defer();

  if(array.length == 0){
     deferred.resolve([]); // return an empty list
  }
  else{
    var segmentUrl = '';
    for(var i =0;i<idsArray.length;i++){
         if(i != (idsArray.length-1))
            segmentUrl += 'ids='+idsArray[i]+'&';
         else
            segmentUrl += 'ids='+idsArray[i];
        }
       HttpWrapper.send('/api/bill?bill=t&'+segmentUrl, {"operation": 'GET'})
         .then(function (response) {
              deferred.resolve(response.data); 
         }
         , function (error) {
              deferred.reject(error);
         });

  } 

  return deferred.promise;
}

[EDIT]

In response to @JC Ford's suggestion, considering that HttpWrapper already returns a Promise, we can simplify the logic as follows:

self.getBillInfo = function(array){

  if(array.length == 0){
     return $q.resolve([]); // return an empty list;
  }
  else{
    var segmentUrl = '';
    for(var i =0;i<idsArray.length;i++){
         if(i != (idsArray.length-1))
            segmentUrl += 'ids='+idsArray[i]+'&';
         else
            segmentUrl += 'ids='+idsArray[i];
        }
       return HttpWrapper.send('/api/bill?bill=t&'+segmentUrl, {"operation": 'GET'});        
  } 
}

Answer 3

Answer №2

Utilize the $q service within the getBillInfo() function to ensure accessibility. By wrapping a value in $q.resolve(), you create a promise that returns the specified value, which can even be another promise. In situations where the getBillInfo() function needs to terminate early without a value, return an empty $q.resolve() to guarantee the return of a promise.

this.getBillInfo = function(idsArray){

    //This results in undefined and triggers an error.
    if(!idsArray.length) return; 

    //This produces a promise that resolves immediately and executes the .then() handler.
    if(!idsArray.length) return $q.resolve();

    //This generates a promise that rejects immediately and executes the .catch() handler.
    if(!idsArray.length) return $q.reject(); 

    var segmentUrl = '';
    for(var i =0;i<idsArray.length;i++){
        if(i != (idsArray.length-1))
            segmentUrl += 'ids='+idsArray[i]+'&';
        else
            segmentUrl += 'ids='+idsArray[i];
    }
    return HttpWrapper.send('/api/bill?bill=t&'+segmentUrl, {"operation": 'GET'});
};

Answer 4

Utilize the $q service within the getBillInfo() function to ensure accessibility. By wrapping a value in $q.resolve(), you create a promise that returns the specified value, which can even be another promise. In situations where the getBillInfo() function needs to terminate early without a value, return an empty $q.resolve() to guarantee the return of a promise.

this.getBillInfo = function(idsArray){

    //This results in undefined and triggers an error.
    if(!idsArray.length) return; 

    //This produces a promise that resolves immediately and executes the .then() handler.
    if(!idsArray.length) return $q.resolve();

    //This generates a promise that rejects immediately and executes the .catch() handler.
    if(!idsArray.length) return $q.reject(); 

    var segmentUrl = '';
    for(var i =0;i<idsArray.length;i++){
        if(i != (idsArray.length-1))
            segmentUrl += 'ids='+idsArray[i]+'&';
        else
            segmentUrl += 'ids='+idsArray[i];
    }
    return HttpWrapper.send('/api/bill?bill=t&'+segmentUrl, {"operation": 'GET'});
};

Building a conditional promise in AngularJS

Answer №1

Answer №2

Similar questions

Automatically reload a particular webpage upon closing a pop-up window (using jQuery)

Tips for displaying a specific JSON element when using interpolation in Angular

"Troubleshooting issue with AngularJS ng-repeat order by functionality based on

Tips for displaying an array of objects in a single <li> tag in React

Are there any methods for simultaneously hosting both React and vanilla JavaScript websites?

Is it possible to determine the outcome of a JavaScript function using Python?

Struggling to store pushed data accurately into an array using node.js

Struggling to dynamically generate class names with clsx in combination with TailwindCss

Automatically populate select boxes with values from a different source using PHP

Difficulty encountered with document.querySelectorAll retrieving paginated elements

What is causing the label's color to remain the same?

Retrieve various objects from separate files using Node.js

Add an asterisk before each line of comment when working in a TypeScript file using the VS Code IDE

Supporting multiple types for matching object structures is a feature in Jest

Ensure mydesign is seamlessly integrated with the asp.net page

The attempt to register a ServiceWorker for the angular scope was unsuccessful

Obtain the IDs of the previous and next list items if they exist?

The Angular routing system is failing to display the designated view

How to insert an element INTO a JSON array using JavaScript

Innovative Inter-Browser Link with a Distinct Shape