Check array after async task finishes

Question

Today I'm having an issue with async task while using JSZIP. I want to check the array content after the async task executed by JSZip ends.

I have a zip which contains one XML file which I read and get a specific node to store them in another list to later do some stuffs. Well, my issue is that the checking array is called before the XML file is read and, as it is executed before XML file is read, array is empty.

I tried some ways to make it work, but, without success yet.

fileElement.addEventListener('change', (e) => {
    try {
        var zip = new JSZip();
        zip.loadAsync( fileElement.files[0])
        .then(function(zip) {
            let xmlfiles = []
            const _ziptask = async () => {for(let [filename, file] of Object.entries(zip.files)) {
                if (filename.includes("file.xml")) {
                    file.async("string").then(function (data) {
                        let xmlDoc = new DOMParser().parseFromString(data,"text/xml");
                        let metaInputs = [...xmlDoc.querySelectorAll("file")];
                        xmlfiles = metaInputs.filter(_node => null != _node.getAttribute('src'));
                        console.log("FILE.XML LOOP ENDED")
                    });             
                }
            }}
            async () => {
                await _ziptask().then(() => {
                    console.log("CHECKING FILE.XML ARRAY ")
                    console.log(xmlfiles)
                })
            }
        }, function() {console.error("ERROR: NOT ZIP FILE")}); 
    } catch (error) {
        restoreFileInput("Something went wrong, try it again later")
    }
});

use async/await syntax in your code so that it ensures that the code in .then executed before the next line of code. — 0xwaleed, Jan 16 '23 at 12:50
Does this answer your question? [Understanding async/await on NodeJS](https://stackoverflow.com/questions/44512388/understanding-async-await-on-nodejs) — kemicofa ghost, Jan 16 '23 at 12:54
@WaleedArshadAwan I tried to add that by using a similar syntax suggested by kemicofaghost, sadly, it does not show any message. I edited my code to show you what I changed. — Oversitoo, Jan 16 '23 at 13:12
Do these changes in your code `fileElement.addEventListener('change', async (e) => {` and then use await before zip.loadAsync `await zip.loadAsync(fileElement.files[0]) ` let me know if you need further help — 0xwaleed, Jan 16 '23 at 14:41
@WaleedArshadAwan Thanks for answering, I tried it, but it doesn't work either. I assume that the changes you brought me are to do the comprobation of xmlfiles out of loadAsync, however, I have them inside it. I know I could move out the array declaration out of it, but I won't that at all. — Oversitoo, Jan 16 '23 at 15:42

score 1 · Accepted Answer · answered Jan 16 '23 at 16:28

Well, basically after testing different things, I reached the goal by using an array of promises and using Promise.all, which basically check that all the promises were resolved successfully.

Its curious that where I read this, the promises are stored in a const declaration instead var or let.

Anyway, if someone want to see the result:

fileElement.addEventListener('change', (e) => {
    try {
        var zip = new JSZip();
        zip.loadAsync( fileElement.files[0])
        .then(function(zip) {
            let xmlfiles = []
            const promises = [];
            for(let [filename, file] of Object.entries(zip.files)) {
                if (filename.includes("file.xml")) {
                    promises.push(file.async("string").then(function (data) {
                        let xmlDoc = new DOMParser().parseFromString(data,"text/xml");
                        let metaInputs = [...xmlDoc.querySelectorAll("file")];
                        xmlfiles = metaInputs.filter(_node => null != _node.getAttribute('src'));
                        console.log("FILE.XML LOOP ENDED")
                    }));             
                }
            }
            Promise.all(promises).then(function () {
                console.log("CHECKING FILE.XML ARRAY ")
                console.log(xmlfiles)
              });
        }, function() {console.error("ERROR: NOT ZIP FILE")}); 
    } catch (error) {
        restoreFileInput("Something went wrong, try it again later")
    }
});

Thanks for the help to the guys who commented previously. Best regards.

Check array after async task finishes

1 Answers1