Append to array in async for loop

Question

I've got this function which contains other nested async functions.

I'm unzipping a zipfile and then appending each HTMLImageElement to an array.

However, the array is printing like this

16 is the correct number of images I'm expecting, but they're undefined when I console.log() them.

export async function fetchVisuals(TestID: number) {
    var zip = new JSZip();
    const res = await fetch('*DJANGO URL*', {
        body: JSON.stringify(TestID),
        method: 'POST'
    })
    let http_ok = res.ok
    const blob = await res.blob()
    var bufferPromise = await blob.arrayBuffer();
    zip.loadAsync(bufferPromise).then(async ({files}) => {
        const mediaFiles = Object.entries(files).filter(([fileName]) =>
            fileName.endsWith('.jpg'),
        );
        if (!mediaFiles.length) {
            throw new Error('No media files found in archive');
        }
        // I'm very confident the issue is to do with the below function
        let promiseArray = mediaFiles.map(function([,image]) {
            image.async('blob').then((blob: Blob | MediaSource) => {
                console.log("mediaFiles loop")
                const img = new Image();
                img.src = URL.createObjectURL(blob)
                console.log(img)
                return img
            })
        })
        Promise.all(promiseArray).then(function(resultsArray) {
            console.log(resultsArray)
        })
    })
}

I'm mapping the promise of each image to an array then doing Promise.all() on this array, so I'm not sure why it's still coming back as undefined.

Inside of mediaFiles.map() I do some prints and they print the img data successfully.

How can I fill this array with the HTMLImageElements?

@EmielZuurbier Yeah that was it. I just read it again after a break and realised i was returning inside image.async and that was it... ur change fixed it :) — Toby
– Toby, Commented Feb 13, 2022 at 14:44
Btw use const {files} = await zip.loadAsync(bufferPromise); instead of .then(…), same for the other then calls. Also you forgot to return (or await) the Promise.all(promiseArray). — Bergi
– Bergi, Commented Feb 13, 2022 at 15:27

Jordan Breton · Accepted Answer · 2022-02-13 16:24:19Z

1

You don't return your promise in the map function:

        let promiseArray = mediaFiles.map(function([,image]) {
            image.async('blob').then((blob: Blob | MediaSource) => {
                console.log("mediaFiles loop")
                const img = new Image();
                img.src = URL.createObjectURL(blob)
                console.log(img)
                return img
            })
        })

Must become :


 // I'm very confident the issue is to do with the below function
        let promiseArray = mediaFiles.map(function([,image]) {
            /*just there : */ return image.async('blob').then((blob: Blob | MediaSource) => {
                console.log("mediaFiles loop")
                const img = new Image();
                img.src = URL.createObjectURL(blob)
                console.log(img)
                return img
            })
        })

For your second question, you must await your promises and return their results :

export async function fetchVisuals(TestID: number) {
    var zip = new JSZip();
    const res = await fetch('*DJANGO URL*', {
        body: JSON.stringify(TestID),
        method: 'POST'
    })
    let http_ok = res.ok
    const blob = await res.blob()
    var bufferPromise = await blob.arrayBuffer();
    const {files} = await zip.loadASync(bufferPromise);
    const mediaFiles = Object.entries(files).filter(([fileName]) =>
        fileName.endsWith('.jpg'),
    );
    if (!mediaFiles.length) {
        throw new Error('No media files found in archive');
    }
    // I'm very confident the issue is to do with the below function
    let promiseArray = mediaFiles.map(function([,image]) {
        return image.async('blob').then((blob: Blob | MediaSource) => {
            console.log("mediaFiles loop")
            const img = new Image();
            img.src = URL.createObjectURL(blob)
            console.log(img)
            return img
        })
    })
    return await Promise.all(promiseArray);
}

edited Feb 13, 2022 at 16:24

answered Feb 13, 2022 at 14:44

Jordan Breton

1,3271 gold badge12 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Toby Over a year ago

@Emial Zuubier suggested this as well and it's fixed it :) many thanks

Jordan Breton Over a year ago

I must be writing my answer while he posted his comment ^^ Glad it helped you !

Toby Over a year ago

Any ideas how I can return resultsArray when fetchVisuals is called?

Jordan Breton Over a year ago

I edited my answer, it should be ok.

Collectives™ on Stack Overflow

Append to array in async for loop

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related