How to load multiple files using jQuery's get function?-CodePudding

I am trying to load multiple files using jQuery's get function. A minimal example looks like this:

<!doctype html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    </head>
    <body>
        <select name="file-select" id="file-select" multiple>
            <option>http://url.to.file/Test1.txt</option>
            <option>http://url.to.file/Test2.txt</option>
        </select>

        <script>
            $(document).ready(function() {
                $('#file-select').change(function () {
                    let loaded_files_list = new Array();
                    let promise = new Promise(function(myResolve,myReject) {
                        $("#file-select option:selected").each(function () {
                            file_name = $(this).val();
                            $.get($(this).val(), function(response) {
                                data = response;
                                // Do something with data
                                console.log("file select length: " $("#file-select option:selected").length);
                                loaded_files_list.push(file_name);
                                console.log('loaded files length: ' loaded_files_list.length)
                                if(loaded_files_list.length == $("#file-select option:selected").length) {
                                    console.log('Entered if clause');
                                    myResolve(loaded_files_list);
                                }
                                else {
                                    myReject('List is not complete yet');
                                }
                            });
                        });
                    }); 
                    promise.then(
                        function(value) {
                            console.log('List is complete!');
                            console.log(value);
                        },
                        function(error) {
                            console.log(error);
                        }
                    );  
                }); 
            });


        </script>
    </body>
</html>

Now if I select a single file this works just like expected and I can see the list with a single item in the console. However if I I select both files, the if clause is entered after both files are loaded, but it seems myResolve is not called as neither List is complete! is displayed nor the list with two elements. What am I doing incorrect here?

CodePudding user response：

$(document).ready(() => {
  // make this a function that "waits" for the await command when
  // used on promises
  $('#file-select').change(async () => {
    // declare an array that we will use to store our HTTP requests
    const filesList = [];

    // extract the clicked options
    const selectedOpts = $('#file-select').children('option:selected')
                    
    // loop over the clicked options
    selectedOpts.each((index, opt) => {
      // extract the text value from the option
      const link = opt.text

      // push the HTTP request to the filesList array without
      // waiting for the response
      filesList.push($.get(link))
    })

    // wait for the HTTP requests to to complete before
    // continuing
    const responses = await Promise.all(filesList)

    // loaded all files
    responses.forEach(data => {
      console.log(data) // => file contents
    })
  });
});