Array of objects containing promises messing up in a for loop

Question

I have an array of objects with dogecoin addresses:

var wallets = [
        { address: 'DT2rmMrutwzdZ8EXwzj4QFdcL6DtvGGkci'}, 
        { address: 'DMoonjyH1aHLZc1kksmikBUhjXromn1ZN4'}
    ];

I also have a simple http request function:

function get(url) {
  return new Promise(function(resolve, reject) {
    var req = new XMLHttpRequest();
    req.open('GET', url);
    req.onload = function() {
      if (req.status == 200) {
        resolve(req.response);
      }
      else {
        reject(Error(req.statusText));
      }
    };
    req.onerror = function() {
      reject(Error("Network Error"));
    };
    req.send();
  });
}

I tried to add a new property to every object in the array wallets containing a promise/api response, using a for loop:

for (i in wallets){
    var balance = get('https://dogechain.info/api/v1/address/balance/'+wallets[i].address)
    .then(
        function(response){
            wallets[i].balance = response;
        },
        function(error) {
            wallets[i].balance = error;
        }
    );
};

console.log(wallets);

but in every iteration, when promise getting resolved, the for loop ends, assigning the responses to the last object.

What I want is an array like this:

[
{ address: 'DT2rmMrutwzdZ8EXwzj4QFdcL6DtvGGkci', balance: -balance from api response-},
{ address: 'DMoonjyH1aHLZc1kksmikBUhjXromn1ZN4', balance: -balance from api response-}
]

You are capturing `i`, which get updated by the loop. You can solve this in a variety of ways, for example with a wrapping function called with `i` as parameter. — Margaret Bloom, Mar 10 '16 at 08:29

score 1 · Accepted Answer · edited May 23 '17 at 11:45

Fist observation is that the returned value is a string and not an object.

resolve(req.response);

change to

resolve(JSON.parse(req.response));

If I understand it you want to populate the array with all Promises response.

   var wallets = [
      { address: 'DT2rmMrutwzdZ8EXwzj4QFdcL6DtvGGkci'},
      { address: 'DMoonjyH1aHLZc1kksmikBUhjXromn1ZN4'}
    ];


    listPromises = wallets.map(function (wallet){
      var balance = get('https://dogechain.info/api/v1/address/balance/'+wallet.address)
        .then(function(response){
            return {
              address: wallet.address,
              balance: response.balance
            };
          },
          function(error) {
            return {
              address: wallet.address,
              balance: error
            }
          }
        );
      return balance
    });


    Promise.all(listPromises)
      .then(function(responseWallets){
        console.log(responseWallets);
        // add your script to continue

      });

    function get(url) {
      return new Promise(function(resolve, reject) {
        var req = new XMLHttpRequest();
        req.open('GET', url);
        req.onload = function() {
          if (req.status == 200) {
            resolve(JSON.parse(req.response));
          }
          else {
            reject(Error(req.statusText));
          }
        };
        req.onerror = function() {
          reject(Error("Network Error"));
        };
        req.send();
      });
    }

I hope it helps. Enjoy !

I simplified the script after @Bergi suggestion.

You probably should just `return` those objects instead of pushing them, and use `Promise.all(listPromises).then(function(responseWallets) { … })` — Bergi, Mar 10 '16 at 08:40

Array of objects containing promises messing up in a for loop

1 Answers1