Reactjs waiting for array.forEach completion before continued with callback

Question

I've only been using JS and React for a short time, and am running into issues with waiting for a forEach loop to complete before continuing.

The function glitchLib below should pull an array of img sources from state, iterate through the elements of the array and "glitch" each image (the actual process of glitching is done with a javascript library). For each glitched image, I want to push a 2-elem array with the original source and glitched source into currentSaved[], and then pass the array of arrays in a callback.

  glitchLib() {
    const currentSaved = [];
    var array = this.state.originalFiles; 
    array.forEach(function(src) {
      var originalImage = src;
      const image = new Image();
      image.src = src; 
      image.onload = () => {
        glitch()
          .fromImage(image)
          .toDataURL()
          .then((dataURL) => {
            const dataArray = [originalImage, dataURL];
            currentSaved.push(dataArray);
          });
        };
    });
    this.props.callback(currentSaved);  
  }

If I wrap the callback in a setTimeout for ~10 seconds or so, the array is properly iterated through so there isn't any issue with the way the js library is performing the "glitching", which should just return a base64 image encoding. Without the setTimeout, an empty array is passed.

What is the proper way to wait for the array to be fully iterated through (or for that matter, is there any better way of doing this sort of thing)?

P Varga · Answer 1 · 2019-05-03T02:41:45.023

You can wait for the completion of a number of Promises using Promise.all():

const glitch = () => Promise.resolve('xyz')
function glitchLib(callback) {
  const promises = []
  const array = ['abc', 'def']
  array.forEach(src => {
    const originalImage = src
    const image = new Image()
    image.src = src
    /*image.onload = */;(() => {
      promises.push(
        glitch()
          //.fromImage(image)
          //.toDataURL()
          .then(dataURL => [originalImage, dataURL])
      )
    })()
  })
  Promise.all(promises)
    .then(currentSaved => callback(currentSaved))
}

glitchLib(x => console.log(x))

Reactjs waiting for array.forEach completion before continued with callback

1 Answers1