How do I wait for all then()s to resolve within an overarching Promise before resolve()ing that Promise?

I have a Javascript function that looks like this in a personal project:

function buildSettings(settings_file_names){

	return new Promise(function(resolve, reject){

		let settings 	= {};

		settings.files 	= {};
		
		settings.getFile = function(file_name){
			return this.files[file_name];
		}
		
		settings_file_names.forEach((file_name) => {
			settings.files[file_name] = getLocalFile(file_name);
			//getLocalFile() returns a promise.
		});

		Promise.all(Object.values(settings.files)).then(() => {
			for (let filename in settings.files){
				if (filename.includes(".json")){
					settings.files[filename].then((filedata) => {
						if (filedata){
							console.log("Parsing into JSON!");
							settings.file[filename] = JSON.parse(filedata);
						}else{
							settings.file[filename] = null;
						}
					});
				}
			}

			console.log("About to resolve!");
			resolve(settings);
		});



	});

}

And the console output looks like this:

utility_functions.js:148 About to resolve!
utility_functions.js:135 Parsing into JSON! (x8)

However, I need to wait to extract the values of those promises and parse them into JSON before resolving the overarching promise. I need to wait for what happens in the then()s. Is there a way to do this? Or am I facing this issue because I'm doing something wrong in a broader sense?

I expected then() to give me the value of a Promise synchronously if I already waited for that Promise to be fulfilled (as I think I did with Promise.all()). In reality then() seems to behave asynchronously even if the Promise is fulfilled.

Thank you in advance for any insight!

The callback that is given as argument to settings.files[filename].then executes asynchronously, even when the promise is already resolved (as is the case here). That is why things happen in the wrong order.

The solution is simple: Promise.all returns a promise that fulfils with a value: that is an array of all the promises' fulfilled values. So there is no more need to call the above quoted then.

Secondly, you don't even need to create a new "overarching" promise with new Promise: this is the Promise constructor antipattern. The idea is that Promise.all already returns a promise, and you work with that one.

Finally, I would not first create the settings data structure only to mutate it later. Delay that "structuring" until you have all resolved promises.

You can do it as follows:

function buildSettings(settings_file_names) {
    const promises = settings_file_names.map(getLocalFile);
    
    // Return the promise you get instead of creating a new one
    return Promise.all(promises).then((responses) => { // Use the argument!
        const pairs = settings_file_names.map((file_name) => {
            const filedata = responses.shift(); // Get the response!
            if (file_name.endsWith(".json")) {
                console.log("Parsing into JSON!");
                return [file_name, JSON.parse(filedata)];
            } else { // Other parsers like CSV...
                return [file_name, null];
            }
        });
        console.log("About to resolve!");
        // Only construct the settings data structure when finished.
        // And return it, so it becomes the overal resolved value
        return {
            files: Object.fromEntries(pairs),
            getFile(file_name) {
                return this.files[file_name];
            }
        };
    });
}