Adding the output from a promise to an array

Question

Adding the output from a promise to an array

I am attempting to clear out and then refill an array with values retrieved from a promise. However, I've noticed that the values don't always get added back in the same order.

$scope.$watch ('timeRange', function (newValue, oldValue, scope){
     $scope.chartdata = []
     //If a filter has changed, redraw all charts
     if (newValue !== oldValue)
     {
        for(var i = 0; i< $scope.charts.length; i++){
           $scope.draw($scope.charts[i]).then(function(value){
               $scope.chartdata.push(value);
           });
        }
     }
}, true);

This content is being rendered using an ng-repeat directive.

javascript angularjs angular-promise

Answer 1

Answer №1

When working with asynchronous tasks, the order of resolution may not always be guaranteed. To ensure consistency, consider using index i instead of push.

$scope.$watch ('timeRange', function (newValue, oldValue, scope){
     $scope.chartdata = []
     //If a filter has changed, redraw all charts
     if (newValue !== oldValue)
     {
        for(var i = 0; i< $scope.charts.length; i++){
           $scope.draw($scope.charts[i]).then(function(i) { // create scope to capture i
               return function(value) { $scope.chartdata[i] = value; };
           }(i));
        }
     }
}, true);

UPD Added an example to demonstrate how scopes work.

var arr = [1, 2, 3];

for (var i = 0; i < arr.length; i++) {
  setTimeout(function(i) {
    return function() {
      console.log(`Let's teach @georgeawg scopes ${i}`)
    }
  }(i), i * 1000)
}

You can also use forEach as shown below:

$scope.$watch ('timeRange', function (newValue, oldValue, scope){
     $scope.chartdata = []
     //If a filter has changed, redraw all charts
     if (newValue !== oldValue)
     {
        $scope.charts.forEach(function(chart, i) {
          $scope.draw(chart).then(function(value) {
             $scope.chartdata[i] = value;
          })
        })
     }
}, true);

Alternatively, you can add all at once using Promise.all or its AngularJS equivalent $q.all.

$scope.$watch ('timeRange', function (newValue, oldValue, scope){
     $scope.chartdata = []
     //If a filter has changed, redraw all charts
     if (newValue !== oldValue)
     {
        $q.all($scope.charts.map(function(chart) {
          return $scope.draw(chart)
        }).then(function(chartdata) {
          $scope.chartdata = chartdata;
        })
     }
}, true);

Answer 2

When working with asynchronous tasks, the order of resolution may not always be guaranteed. To ensure consistency, consider using index i instead of push.

$scope.$watch ('timeRange', function (newValue, oldValue, scope){
     $scope.chartdata = []
     //If a filter has changed, redraw all charts
     if (newValue !== oldValue)
     {
        for(var i = 0; i< $scope.charts.length; i++){
           $scope.draw($scope.charts[i]).then(function(i) { // create scope to capture i
               return function(value) { $scope.chartdata[i] = value; };
           }(i));
        }
     }
}, true);

UPD Added an example to demonstrate how scopes work.

var arr = [1, 2, 3];

for (var i = 0; i < arr.length; i++) {
  setTimeout(function(i) {
    return function() {
      console.log(`Let's teach @georgeawg scopes ${i}`)
    }
  }(i), i * 1000)
}

You can also use forEach as shown below:

$scope.$watch ('timeRange', function (newValue, oldValue, scope){
     $scope.chartdata = []
     //If a filter has changed, redraw all charts
     if (newValue !== oldValue)
     {
        $scope.charts.forEach(function(chart, i) {
          $scope.draw(chart).then(function(value) {
             $scope.chartdata[i] = value;
          })
        })
     }
}, true);

Alternatively, you can add all at once using Promise.all or its AngularJS equivalent $q.all.

$scope.$watch ('timeRange', function (newValue, oldValue, scope){
     $scope.chartdata = []
     //If a filter has changed, redraw all charts
     if (newValue !== oldValue)
     {
        $q.all($scope.charts.map(function(chart) {
          return $scope.draw(chart)
        }).then(function(chartdata) {
          $scope.chartdata = chartdata;
        })
     }
}, true);

Answer 3

Answer №2

Code Snippet with Error

function generateRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function asynchronousFunction(index) {
  return new Promise((resolve) => {
    setTimeout(() => resolve(index), generateRandomInt(0, 3000));
  });
}

const resultList = [];

for (var i = 0; i < 5; i++) {
  asynchronousFunction(i)
    .then((value) => {
      resultList.push(value);
    });
}

setTimeout(() => {
  console.log(resultList);
}, 4000);

Corrected Code Snippet

To address the issue, we can encapsulate the data position within an IIFE function.

function generateRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function asynchronousFunction(index) {
  return new Promise((resolve) => {
    setTimeout(() => resolve(index), generateRandomInt(0, 3000));
  });
}

const resultList = [];

for (var i = 0; i < 5; i++) {
  (function(j) {
    asynchronousFunction(i)
      .then((value) => {
        resultList[j] = value;
      });
  })(i);
}

setTimeout(() => {
  console.log(resultList);
}, 4000);

Answer 4

Code Snippet with Error

function generateRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function asynchronousFunction(index) {
  return new Promise((resolve) => {
    setTimeout(() => resolve(index), generateRandomInt(0, 3000));
  });
}

const resultList = [];

for (var i = 0; i < 5; i++) {
  asynchronousFunction(i)
    .then((value) => {
      resultList.push(value);
    });
}

setTimeout(() => {
  console.log(resultList);
}, 4000);

Corrected Code Snippet

To address the issue, we can encapsulate the data position within an IIFE function.

function generateRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function asynchronousFunction(index) {
  return new Promise((resolve) => {
    setTimeout(() => resolve(index), generateRandomInt(0, 3000));
  });
}

const resultList = [];

for (var i = 0; i < 5; i++) {
  (function(j) {
    asynchronousFunction(i)
      .then((value) => {
        resultList[j] = value;
      });
  })(i);
}

setTimeout(() => {
  console.log(resultList);
}, 4000);

Answer 5

Answer №3

To achieve this in a neat way, you can utilize .map along with Promise.all (or $q.all() in AngularJS). This method not only preserves the order of items but also enables you to track when the entire array has been filled.

Here's an example based on Gregory's code snippet:

(Note: The following code snippet uses setTimeout, new Promise, and Promise.all for demonstration purposes in a runnable Stack Snippet. In real AngularJS code, you would typically omit setTimeout and new Promise, opting for $q.all instead of Promise.all, as demonstrated at the end)

function randInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function delay(ms) {
  return new Promise(function (resolve) { setTimeout(resolve, ms); });  
}

function asyncFunc(value) {
  return delay(randInt(0, 3000))
  .then(() => { 
      console.log(value, 'finished');
      return value * 2 + 1;
  });
}

const origArray = [0, 1, 2, 3, 4];

Promise.all(origArray.map(asyncFunc))
    .then(resultArray => {
      console.log(resultArray);
    });

Adapting this to your specific code scenario, it would look like:

$scope.$watch('timeRange', function(newValue, oldValue, scope) {
     $scope.chartdata = [];
     // If a filter has changed, redraw all charts
     if (newValue !== oldValue) {
        $q.all($scope.charts.map($scope.draw))
            .then(resultArray => {
                $scope.charts = resultArray;
            });
     }
}, true);

Answer 6

To achieve this in a neat way, you can utilize .map along with Promise.all (or $q.all() in AngularJS). This method not only preserves the order of items but also enables you to track when the entire array has been filled.

Here's an example based on Gregory's code snippet:

(Note: The following code snippet uses setTimeout, new Promise, and Promise.all for demonstration purposes in a runnable Stack Snippet. In real AngularJS code, you would typically omit setTimeout and new Promise, opting for $q.all instead of Promise.all, as demonstrated at the end)

function randInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function delay(ms) {
  return new Promise(function (resolve) { setTimeout(resolve, ms); });  
}

function asyncFunc(value) {
  return delay(randInt(0, 3000))
  .then(() => { 
      console.log(value, 'finished');
      return value * 2 + 1;
  });
}

const origArray = [0, 1, 2, 3, 4];

Promise.all(origArray.map(asyncFunc))
    .then(resultArray => {
      console.log(resultArray);
    });

Adapting this to your specific code scenario, it would look like:

$scope.$watch('timeRange', function(newValue, oldValue, scope) {
     $scope.chartdata = [];
     // If a filter has changed, redraw all charts
     if (newValue !== oldValue) {
        $q.all($scope.charts.map($scope.draw))
            .then(resultArray => {
                $scope.charts = resultArray;
            });
     }
}, true);

Adding the output from a promise to an array

Answer №1

Answer №2

Answer №3

Similar questions

using jquery to retrieve the current time and compare it

Incorporate content from a single HTML file into a different one

The Reactjs infinite scroll feature continuously displays fresh data

As two divs glide across the screen, the top div remains hidden from view

Validating a particular value using Regex in React Formik

What is the best way to create a close button using JavaScript?

Personalizing MaterialUI's autocomplete functionality

Navigate to a New Page post Dropdown Selection

Button to close Jquery Dialog

The submission of the form proceeds even with the warning displayed

Uh oh! React encountered a cross-origin error and is unable to access the real error object during development

Substitute <br /> tags with a line separator within a textarea using JavaScript

AngularJS: The art of object pushing

Can you provide the regular expression that will successfully match this specific string of text?

Do we need to use the render method in ReactJs?

Is it possible in Angular to generate a module and component without including a CSS file in a single command?

Transform the appearance of several elements using querySelectorAll

The attachment with Ajax is not displaying any file data

Creating pagination in Vue using an array of objects

divide a JSON list