How can I call a function that returns a promise for each item array in a loop

Question

public takePicture() { 
 let options: CaptureImageOptions = { limit: 3 };
    return this.mediaCapture.captureImage(options)
      .then((data: MediaFile[]) => {
        console.log(data);
        for (let i = 0; i <= data.length; i++) {
          return this.beforeSave(data[i].fullPath).then((save) => {
            this.save(save);
          });
        }
      })
      .catch((err: CaptureError) => { console.log(err) });
}

I am trying for each image that I am taking from my camera to phone to call the beforeSave(). However, only for the first one, the promise is returned. How should I implement my code in order to do it for each item in my data array?

Do you think Promise.all can help you? developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — AliF50
– AliF50, Commented Mar 16, 2020 at 15:19
Oh, you're returning right away, okay, let me try. Try removing the return keyword like I have in the answer. — AliF50
– AliF50, Commented Mar 16, 2020 at 15:25

jfriend00 · Accepted Answer · 2020-03-16 15:56:34Z

If the goal here is to save all images that were captured and communicate back completion or error to the caller then you can change to a .map() to collect an array of promises and use Promise.all() to monitor that array of promises. That code looks like this:

public takePicture() { 
    let options: CaptureImageOptions = { limit: 3 };
    return this.mediaCapture.captureImage(options).then((data: MediaFile[]) => {
        console.log(data);
        // collect array of promises and use Promise.all() to monitor them
        return Promise.all(data.map(item => {
            return this.beforeSave(item.fullPath).then((save) => {
              return this.save(save);
            });
        }));
    }).catch((err: CaptureError) => { 
        // log error, then rethrow so caller can see the error
        console.log(err) 
        throw err;
    });
}

FYI, this assumes your use of this.beforeSave() and this.save() is correct. I don't know these interfaces so I'm just taking your lead on this.

AliF50 · Accepted Answer · 2020-03-16 15:30:11Z

1

You are returning right away and the for loop does not complete. Try removing the return.

public takePicture() { 
 let options: CaptureImageOptions = { limit: 3 };
    return this.mediaCapture.captureImage(options)
      .then((data: MediaFile[]) => {
        console.log(data);
        for (let i = 0; i < data.length; i++) {
          this.beforeSave(data[i].fullPath).then((save) => { // !! Remove the return here
            this.save(save);
          });
        }
      })
      .catch((err: CaptureError) => { console.log(err) });
}

edited Mar 16, 2020 at 15:30

answered Mar 16, 2020 at 15:25

AliF50

19.1k2 gold badges29 silver badges45 bronze badges

6 Comments

Kurt Hamilton Over a year ago

Also, it should be i < data.length

jfriend00 Over a year ago

Answers with zero explanation can be improved by explaining what you changed and why without leaving us to have to do our own visual diff.

jfriend00 Over a year ago

A problem with this approach is that it does not handle errors in the this.beforeSave() promise chain or in this.save(). It ignores those errors and could even end with an unhandledRejection. Further, it doesn't propagate errors back to the caller or let the caller know when everything is done. I think your first comment about using Promise.all() is probably what this needs.

Kathrine Hanson Over a year ago

@jfriend00 can u suggest a better solution?

Kathrine Hanson Over a year ago

@AliF50 this takes time to call the save() why?

|

Collectives™ on Stack Overflow

How can I call a function that returns a promise for each item array in a loop

2 Answers 2

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related