Promise then array.push another promise not working?

Question

I am trying to loop through an array of values returned asyncronously from an API, and within that loop I want to call another function that returns a promise. I cannot get the second promise to be evaluated within the loop. How do I do this??

async componentDidMount(){     
 const resolvedCampgrounds = await this.returnThoseValues('getListings','/world')
 resolvedCampgrounds.forEach(async feature=> {
    if (feature['mapOn'].toUpperCase()==='TRUE'){ 

              await coordinateData.push({ 

                "key": feature['id'],
                "Address": feature['street_address'] + feature['zip_code'],
                "image": jpg,
                "position": CodeAddress(feature['street_address'] + feature['zip_code'],this.props.google).then(value => {return value})
              })

          }
      })
      set_state(coordinateData);

CodeAddress() returns a resolved promise, the result of which I attempt to access via .then().The only way I have been able to accomplish this so far is to call set_state within the loop on each object individually (instead of array.push-ing), but that does not suffice as I need to 'bulk push' rather than changing state every time.

For starters how about to perform the Array.push() after you have resolved CodeAddress() ? Array.push() is not an asyncronous process, and if u do that, then it will push a string "promise" on the "position" atribute. — Ionut Eugen, Jan 29 '20 at 15:28
A solution would be to use the async module https://caolan.github.io/async/v3/. With this yu can also make ur async function faster by running multiple threads at once if u need to. ```await async.eachLimit(resolvedCampgrounds,limit,(feature)=>{``` And I dont know hoe your CodeAdress() function works but I sugest this : let position = await CodeAddress(feature['street_address'] + ```feature['zip_code'],this.props.google).then(value => {return value})``` — Ionut Eugen, Jan 29 '20 at 15:43
I tried to resolve CodeAddress() before .push by assigning a value after if() statement and before .push. I use value in .push, and it does some async stuff where it will return [] in console log and values only appear when I expand console.log. So does not properly send to set_state synchronously @IonutEugen — Nina, Jan 29 '20 at 16:15

Reza · Answer 1 · 2020-01-29T19:14:50.980

0

One issue in your code is you are using forEach to do some async stuff, which forEach doesn't support it.

May be if you solve this your original issue will be solved too.

You need to add another method called asyncForEach as below

async function asyncForEach(array, callback) {
  for (let index = 0; index < array.length; index++) {
    await callback(array[index], index, array);
  }
}

then change your code like this

async componentDidMount(){     
 const resolvedCampgrounds = await this.returnThoseValues('getListings','/world')
 asyncForEach(resolvedCampgrounds, async feature=> {
    if (feature['mapOn'].toUpperCase()==='TRUE'){ 
              const position = await CodeAddress(feature['street_address'] + feature['zip_code'],this.props.google);
              coordinateData.push({ 

                "key": feature['id'],
                "Address": feature['street_address'] + feature['zip_code'],
                "image": jpg,
                "position": position
              })

          }
      })
      set_state(coordinateData);

Promise then array.push another promise not working?

1 Answers1