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?
$(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
})
});
});