Iterate through a JavaScript object while simultaneously executing asynchronous calls

My goal is to use the THREE.XHRLoader to load multiple files, then add the key of each loaded object along with the file to another object called loadedFiles. The issue I'm facing is that when trying to retrieve the key for each loaded object, it always returns the last key in the object array because the callback function gets executed after the loop has finished.

This is what my code looks like:

var loader = new THREE.XHRLoader();
var loaded = 0;

for (var k in filesToLoad) {
    loader.load(filesToLoad[k], function(file) {
        console.log(k); // Instead of getting the correct key for the loaded file, 
//it always returns the last key.

        loadedFiles[k] = file;

        loaded++;

        if (loaded == Object.keys(filesToLoad).length) {
            console.log(loadedFiles);
        }
    });
}

Answer №1

If you want to handle multiple asynchronous calls, one approach is to wrap them in a promise and then use Promise.all to resolve once they have all completed (pseudo code).

let promises = Object.keys(tasks)
  .map(key => {
    return new Promise((resolve, reject) => {
        asyncFunction(tasks[key], resolve, reject); //Assuming the function has success and error callbacks
    });
  });

Promise.all(promises)
    .then(result => console.log(result)); // [data, data, data...]

Depending on your browser support, you may need to consider using ES5 compatible promise libraries if ES6 is not fully supported.

Keep in mind that all tasks will be processed in parallel as each promise is created. The requests will already be initiated before entering Promise.all.

Learn more about Promise.all here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Implementing the `next()` function in JavaScript using Object-Oriented Programming

I am facing an issue with creating the next() function using object-oriented programming methods. Here is the fiddle link: https://jsfiddle.net/s5e1530c/ "use strict"; var i, j, arr, loop, $; (function() { $ = function(el, context) { conte ...

Unlocking the Secret Code

Presenting the question: checkPassword([["Peter", "P"], ["Sarah", "S"], ["Ethan", "R"]], {"Peter": "P", "Sarah": "Q", //"Ethan":"E"}) ...

How to access the body element from within an AngularJS directive

Is there a way to access the body element in an angular directive without using jQuery? I want to achieve something similar to $('body').innerWidth(); but using Angular's built-in jqlite implementation instead of jQuery. ...

The program encountered an unexpected identifier 'getProject' instead of ';'. It was expecting to find a semicolon after the async variable declaration

When using this JavaScript on a webpage, I encounter an issue: <script async type="module"> import {projectCode} from "./assets/js/config.js"; import {getProject} from "./assets/js/saleproject.js"; import {getAccount} fr ...

Unusual HTML Structure (content misplaced or out of order?)

Recently, I started learning CSS/HTML in school and we just delved into Javascript. Currently, we are working on a website project. However, while trying to integrate the content with the navbar, I encountered a strange issue. When resizing to 620px or le ...

store JSON data within an HTML list element

I've been working on a JavaScript script that allows me to generate list items in HTML. Right now, I have functionality to drag and remove the items using another script. However, I am interested in adding some additional information to each list item ...

Restrict the Angular ng-repeat directive to specific rows only

Suppose we have a JSON dataset listing all languages of books: $scope.data = [{ "title": "Alice in wonderland", "author": "Lewis Carroll", "lang": ["en"] }, { "title": "Journey to the West", "author": "Wu Cheng'en", "lang": [" ...

Issues with ng-bind-html in AngularJS and JavaScript are preventing it from functioning

I am experimenting with creating a dynamic webpage that can change its contents without being limited to predefined templates (potentially offering infinite template options). Below is the code I am currently testing: <!DOCTYPE html> <html lang= ...

What causes errors in URL routeProvider with AngularJS?

Implementing routeProvider in Angular JS allows me to structure my links like this: www.site.com/profile#/profile/profession/3 However, when trying to access the page, Angular JS displays the following error message: Uncaught Error: Syntax error, unreco ...

Does utilizing this.someFunction.bind(this) serve a purpose or is it duplicative

As I analyze someone's code, I stumbled upon the following snippet: this.device_name.changes().onValue(this.changeName.bind(this)) My interpretation so far is that onValue requires a callback function, which in this case is this.changeName.bind(this ...

Filtering a user list array in JavaScript based on tags using regular expressions

I have a user list array that needs to be filtered by tags. I attempted to filter the array using the filter and match methods with a RegExp for matching the tag, but the results were not as expected. let users=[{id:1,name:'john',tags:' ...

What is the method to retrieve JSON data with data['file.file']?

When trying to query my data using var x = data.file.file;, I encountered an issue where data['file.file'] fails. Is there a way to access this data without having to split the string and walk recursively through it? ...

Using axios to pass parameters in a post request

In my webpack project, I am currently using vue-resource for ajax calls. Everything works perfectly with "get" calls, but when I try a post request, my PHP file does not receive any parameters. Even when I use var_dump($_POST), it just gives me an empty ar ...

IE8 does not properly execute AJAX call to PHP file

It's strange, it works perfectly fine in Firefox. This is the JavaScript code I'm using: star.updateRating=function(v, listid) { xmlHttp=GetXmlHttpObject(); if (xmlHttp==null) { alert("Looks like AJAX isn't supported by your browser!" ...

Adjust the location.hash and then navigate using the Back button - Internet Explorer displays unique behavior compared to other web browsers

When updating `location.hash`, all browsers behave correctly by only changing the URL without refreshing the page. However, pressing the Back button in Internet Explorer and other browsers results in different behaviors. IE fails to update the history wit ...

Guide on accessing information from a JSON array in JavaScript

Today I encountered an issue while trying to retrieve a value from a JSON array in my JavaScript code: This is the structure of the JSON array: [ { "_id": 0, "_entityMetadataList": [ { "_metadataValue": "/storage/emula ...

There was an error encountered while attempting to read the property 'webpackHotUpdate' of an undefined object

Encountering an error when the browser reaches the following line in the "webpackified" app.js file: /******/ (function(modules) { // webpackBootstrap /******/ function hotDisposeChunk(chunkId) { /******/ delete installedChunks[chunkId]; /****** ...

Is there a more efficient method for coding this switch/case in TypeScript?

I'm working on a basic weather application using Angular and I wanted some advice on selecting the appropriate image based on different weather conditions. Do you have any suggestions on improving this process? enum WeatherCodition { Thunderstorm ...

Clearing Arrays in React Native Using useState

I'm struggling with the following code which aims to create an animated polyline for a map. I came across some examples online, but they were using outdated methods and didn't include useEffect or useState. I can't seem to clear the polylin ...

Upon selecting the correct prompt, it fails to respond when I press enter

I attempted to use a multi-search script that I found on a website. I followed the instructions given and made the necessary changes. After saving the file as an HTML document, I opened it in Chrome. However, when I type in a word and hit enter, nothing ha ...