Navigating through nested promises can be a daunting task within the world of JavaScript and Angular

Question

Navigating through nested promises can be a daunting task within the world of JavaScript and Angular

Function 2 relies on the return of Function 1, while Function 3 uses both returns. How can I clean up this process? Currently, Function 3 is only giving me undefined values.

Below are my 3 functions:

Function1

$scope.nombreCompetencesATraiter = function(){
var nbr = 0;
        notesService.getNotesByCollaborateurId($scope.idCollaborateurSelectionne).then(function(data){
            $scope.myNotes = data;
            angular.forEach($scope.myNotes, function(valueNote, keyNote) {
                if ((valueNote.status === "EN_ATTENTE_DE_VALIDATION") || (valueNote.status === "EN_ATTENTE_DE_SUPPRESSION")){
                    nbr++;
                }
            })
            console.log(nbr);
            return nbr;
        })
    }

Function 2

$scope.affinerConfigBoutonsCompetences = function() {
        nbCompetenceATraiter = $scope.nombreCompetencesATraiter();
        if (nbCompetenceATraiter == 0){
            $scope.radioModelFilterToutesLesCompetences = true;
            $scope.radioModelFilterCompetencesAValider = false;
        }
        else{
            $scope.radioModelFilterCompetencesAValider = true;
            $scope.radioModelFilterToutesLesCompetences = false;
        }
    }

Function 3

$scope.affinerConfigBoutonsCompetencesThen = function(){
        $q.all([$scope.nombreCompetencesATraiter(), $scope.affinerConfigBoutonsCompetences()]).then(function(value) {
            console.log(value[0]);
            console.log(value[1]);
        })
    }

Any advice would be greatly appreciated. Thank you!

javascript angularjs promise

Answer 1

Answer №1

After reviewing Luillyfe's feedback, it appears that there are some mistakes in your code. Here is a more concise way to resolve the dependency:

var f1 = () => new Promise( resolve => resolve('value1'));
var f2 = ( value1 ) => new Promise( resolve => resolve('value2'));
var f3 = ( value1, value2 ) => new Promise( resolve => resolve('done'));

f1()
    .then( value1 => Promise.all([ value1, f2( value1 ) ]) )
    .then( ([ value1, value2 ]) => f3( value1, value2 ))

Remember, Promise.all can be used with non-Promise values as well. It will simply pass them directly to the next then block.

Answer 2

After reviewing Luillyfe's feedback, it appears that there are some mistakes in your code. Here is a more concise way to resolve the dependency:

var f1 = () => new Promise( resolve => resolve('value1'));
var f2 = ( value1 ) => new Promise( resolve => resolve('value2'));
var f3 = ( value1, value2 ) => new Promise( resolve => resolve('done'));

f1()
    .then( value1 => Promise.all([ value1, f2( value1 ) ]) )
    .then( ([ value1, value2 ]) => f3( value1, value2 ))

Remember, Promise.all can be used with non-Promise values as well. It will simply pass them directly to the next then block.

Answer 3

Answer №2

Task 1 needs a return statement added before calling noteService

$scope.countPendingSkills = function() {
var count = 0;
  return notesService.getNotesByCollaborateurId($scope.idCollaborateurSelectionne)
    .then(function(data) {
      $scope.myNotes = data;
      angular.forEach($scope.myNotes, function(valueNote, keyNote) {
        if ((valueNote.status === "EN_ATTENTE_DE_VALIDATION") || (valueNote.status === "EN_ATTENTE_DE_SUPPRESSION")) {
          count++;
        }
      })
      console.log(count);
      return count;
  })
}

Task 2

$scope.updateSkillButtonsConfig = function() {
  return $scope.countPendingSkills().then(function (value) {
    pendingCount = value;
    if (pendingCount == 0) {
      $scope.showAllSkills = true;
      $scope.showPendingSkills = false;
    } else {
      $scope.showPendingSkills = true;
      $scope.showAllSkills = false;
    }
    return pendingCount; // value you want to return
  });
}

Task 3

$scope.updateSkillButtonsConfigThen = function(){
    $q.all([$scope.countPendingSkills(), $scope.updateSkillButtonsConfig()]).then(function(value) {
        console.log(value[0]);
        console.log(value[1]);
    })
}

Let's see how that works!

Answer 4

Task 1 needs a return statement added before calling noteService

$scope.countPendingSkills = function() {
var count = 0;
  return notesService.getNotesByCollaborateurId($scope.idCollaborateurSelectionne)
    .then(function(data) {
      $scope.myNotes = data;
      angular.forEach($scope.myNotes, function(valueNote, keyNote) {
        if ((valueNote.status === "EN_ATTENTE_DE_VALIDATION") || (valueNote.status === "EN_ATTENTE_DE_SUPPRESSION")) {
          count++;
        }
      })
      console.log(count);
      return count;
  })
}

Task 2

$scope.updateSkillButtonsConfig = function() {
  return $scope.countPendingSkills().then(function (value) {
    pendingCount = value;
    if (pendingCount == 0) {
      $scope.showAllSkills = true;
      $scope.showPendingSkills = false;
    } else {
      $scope.showPendingSkills = true;
      $scope.showAllSkills = false;
    }
    return pendingCount; // value you want to return
  });
}

Task 3

$scope.updateSkillButtonsConfigThen = function(){
    $q.all([$scope.countPendingSkills(), $scope.updateSkillButtonsConfig()]).then(function(value) {
        console.log(value[0]);
        console.log(value[1]);
    })
}

Let's see how that works!

Navigating through nested promises can be a daunting task within the world of JavaScript and Angular

Answer №1

Answer №2

Similar questions

"Transferring a variable from the parent Layout component to its children components in Next

Direct AngularJS to automatically reroute users from the login page to the welcome page

Transform ajax functionality into jquery

Encountering an Issue with NextJS on GAE: EROFS Error indicating a read-only file system

Animating nested ng-repeat loops

Implementing selective image loading with HTML and angularJS

PHP functions triggered by ajax fail to function properly when called repeatedly

Achieve full height without scrolling in React

Why is TypeScript giving an error about an undefined object key, even though the key was assigned a value in the previous command?

Creating dynamic flags with specific parameters using Pentaho and JavaScript

`Cannot recompile the `Product` model as it has already been compiled. Please try again

Leveraging the power of node pkg to generate standalone executables while configuring npm

Is there a way to add an AngularJS module dependency without having to include it in the dependency array during the module definition process?

Trigger animation when the scroll position reaches 0.52 in Next.js using framer-motion

Leveraging jQuery's element objects and the :contains selector allows for powerful

Discover the "route" of a JSON element using JavaScript

Switching out text when hovering with Jquery or JavaScript

Javascript: triggering a self-executing function manually

Is it possible to dynamically add and remove items using React state?

What is the best way to assign the initial value in a dropdown menu populated by a database table?