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

Facing the error "Routes not found in Angular 2: ''"

Development of Chrome Extensions, JavaScript dilemma

Is using JQuery recommended for implementing onclick and onchange events?

Struggling to retrieve information from a JSON file and display it within a component?

Tips for retrieving the return value from a function with an error handling callback

Show each text field individually in JavaScript

Having trouble getting the mock module to work with mockImplementation

What causes jQuery results to resemble a function?

Tips for inserting a string into an array nested within an object stored in a state array

Setting the texture for a loaded glb model using Three.js

Error: You forgot to close the parenthesis after the argument list / there are duplicate items

Combining data-target and ng-click for optimal functionality

Is there a way for me to showcase the latitude and longitude retrieved from JSON data on a Google Map using modals for each search result in Vue.js?

Attempting to dynamically update the title of a Vue Meta page using a combination of a string and

Changing the HTML Structure of the md-datepicker Component

Button activates SVG animation

Add the content of a JavaScript variable to a label without using any scripting

Start by retrieving information and then sending properties to a different component

What steps should I take to create a functional image scrolling effect similar to the one shown in this example?

Finding the label that is linked to the current DIV or textarea by its "for" property