How To Assign The Result Of A Promise To Array Elements Using .map()?

I am using AngularJS here, but if you have a more generic answer I’ll be glad to know about it. I have an array of elements containing ids myArray = [{ id: 0, foo: 'foo' }, {

Solution 1:

Chaining asynchronous functions is a tricky old problem. Here's a way of doing it in Vanilla Javascript (with or without Angular):

var myArray = [
  {
    id: 0,
    foo: "foo"
  },
  {
    id: 1,
    bar: "bar"
  }
];

var asyncChain = function(myFunction){
  var nextThingToDo = function(){
    myFunction(nextThingToDo);
  }
  nextThingToDo();
}
// In this example, myFunction is getArrayItemInfo// nextThingToDo is goToNextArray Item// This is how Express.js and Node do things// Yes, nextThingToDo is calling itself// If this seems weird, it's because it is. Yay, Javascript.var index = 0;
var getArrayItemInfo = function(goToNextArrayItem){
  if(index < myArray.length){
    Service.getInformations({id: index}, function(data){
      myArray[index].data = data; // You can do something with the data here
      index += 1;
      goToNextArrayItem(); // Move on to the next item when the asynchronous part is done// Without this, execution would stop here
    });
  }
}

asyncChain(getArrayItemInfo);

---

Here's a simple example that you can try without Angular:

var myArray = ["One sec", "Two secs", "Three secs", "...and that's all."];
var asyncChain = function(myFunction){
  var next = function(){
    myFunction(next);
  }
  next();
}
var index = 0;
var getArrayItemInfo = function(goToNextArrayItem){
  if(index < myArray.length){
    setTimeout(function(){
      document.write(myArray[index] + "<br />");
      index += 1;
      goToNextArrayItem();
    }, 1000);
  }
}
asyncChain(getArrayItemInfo);

Solution 2:

You could do something like this, using built in $q service on angular.

You can iterate over the elements, make a call to the service and return a promise and execute the callback only when all async operations are complete.

In this case callback takes an array of results from their respective calls.

var app = angular.module("sampleApp", []);

app.controller("sampleController", ["$scope", "$q", "sampleService",
  function($scope, $q, sampleService) {
    var randomArray = [1, 2, 3, 4, 5, 6];

    var promisesArray = randomArray.map((input) => {
      return sampleService.getInformations(input)
    });

    $q.all(promisesArray).then(function(outputArray) {
      console.log("Results Array");
      console.log(outputArray);
    });
  }
]);

app.service("sampleService", function() {
  this.getInformations = function(value) {
    var promise = newPromise(function(resolve, reject) {
      setTimeout(function() {
        value = value * 2;
        resolve(value);
      }, 1000);
    });

    return promise;
  };
});

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script><divng-app="sampleApp"><divng-controller="sampleController"></div></div>

Solution 3:

Promise.all(myArray.map(item =>newPromise((resolve, reject) => {
  Service.getInformations({id: item.id}, resolve, reject)
}).then((resultArray) => {
  //reduce result
}).catch((errorArray)=> {
  //reduce error
})