1

I need to import X files containing a single variable into a larger application, where X is specified by the user. This needs to be done client side, and work on any localhost. Browser restrictions are fine, but requiring people to install things like node.js to run it is too much.

These files can be tailored to purpose, so long as they allow me to grab the variable from them - they can be .txt, .js or anything else. I am aware this may not be possible, at least for certain methods, for security reasons. Some more context is given below:

I have a JS app that runs test items on a local machine (or with work, a server) - but local machine is the default. I'm currently adding a second app that allows certain kinds of users to make their own test items to run in the first app.

These constructed test items will be individually downloaded, and then renamed* and moved by the user to a specific folder. They also download a file that simply specifies the number of test items they want, and place that file into the same folder. HTML can load and run this file, as it has a static name, and there is always only one; so the number of test items is effectively known by/'hard coded' into the app that administers the test. The issue is the test items.

Each downloaded test item is currently an .mjs file, the important part of which is a little like this:

let testItem = [[3,3],[0,1,0,0],[0,[1,1,1],[[0,0,0,0],[1,2,0,1]]];

Though I've experimented with various wrappers for that data, e.g. :

export const testItem = [[3,3],[0,1,0,0],[0,[1,1,1],[[0,0,0,0],[1,2,0,1]]];

Assuming the user has successfully named them - according to provided instructions, and put these test items in the right folder, etc... I now need to dynamically import them to my test.

The code below is my most recent failed attempt at doing so:

testItemList = [];
for (var x = 0; x < numberOfTestItems; x++) {
    promise = import('TestItems/'+fileName(x)+'.js')
                    .then(m => testItemList.push(m.testItem))
}

What is the best way of achieving my goal stated at the top of this question?

Assuming my attempt above is the best direction, is there a way to pause the code until this is loaded?

*Rather than having the user rename the files to very specific names (which could be easily messed up), is there a way of loading all .js files in a folder?

Isaac
  • 361
  • 5
  • 18
  • Hm… so basically you're asking how to handle asynchronous calls, correct? There are quite a few posts on Stack Overflow already that explain this. The quasi-canonical answer is this: https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call/14220323#14220323 – Patrick Hund Nov 02 '19 at 17:01
  • And this one explains how to use Promise.all to handle async calls in a loop, like you try in your code example: https://stackoverflow.com/a/37576787/1253156 – Patrick Hund Nov 02 '19 at 17:04
  • Does this answer your question? [Using async/await with a forEach loop](https://stackoverflow.com/questions/37576685/using-async-await-with-a-foreach-loop) – Patrick Hund Nov 02 '19 at 17:05
  • Unfortunately I need to be able to do this on an arbitrary local host - without pre-installing anything (I believe those answers require the user to install node.js). Those answers do not appear to be able to provide that. – Isaac Nov 03 '19 at 13:41
  • HTML5's readfile requires that the user specifies the file. This is a reasonable demand for security reasons. But is a problem for me, as I have two kinds of users. One who needs to be able to specify the test items, and one (who is taking the test) who must not be able to. – Isaac Nov 03 '19 at 13:43
  • If HTML5's readfile could target everything in a folder, that might work. But I believe it can't? ... requiring the 'test-setter' to upload ~60 tiny files individually each time they want to run the test is impractical. – Isaac Nov 03 '19 at 13:48

0 Answers0