How to access array from another .js file?

Question

I want to get a (Very large) array from another file so it doesn't take up space in my main js file but I cannot figure it out, I have spent about 2 - 3 days searching online but cannot find an answer that will work. I've tried answers from How to access js array defined in another js file aswell as many other sites but nothing is working.

// the js file with the array I want
wordList = [
    "this",
    "is",
    "an",
    "array"
]

// main js file
const word = wordList[Math.floor(Math.random() * wordList.length)];

Any help is appreciated :) EDIT: This is for a browser game if that helps

Are you using modular javascript? – Tanay Apr 23 '22 at 07:06 — Tanay, Apr 23 '22 at 07:06
I'm not familiar with what that means so I'll assume no – TerryB Apr 23 '22 at 07:17 — TerryB, Apr 23 '22 at 07:17

score 2 · Answer 1 · edited Apr 23 '22 at 07:29

2

You can export the variable from first file using export.

// example.js
const WordList = [
    "this",
    "is",
    "an",
    "array"
]

export { WordList };

Then, import the variable in main.js file using import.

import { WordList } from './example.js'

edited Apr 23 '22 at 07:29

Tanay

871
1
6
12

answered Apr 23 '22 at 07:03

nedoder

465
1
5
17

I've tried this and I receive the following errors: "Cannot use import statement outside a module" and "Unexpected Token 'import'" Might be worth mentioning I'm trying this in a browser – TerryB Apr 23 '22 at 07:08
Try adding type="module" to your script tag – nedoder Apr 23 '22 at 07:10
I've tried this and I receive some new errors: "Access to script at 'file_path" from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, https, ipns, chrome-untrusted, ipfs, data, chrome, chrome-extension." and "GET 'file_path' net::ERR_FAILED (along with the original "Cannot use import statement outside a module") – TerryB Apr 23 '22 at 07:15
If you try to open a web-page locally, via file:// protocol, you’ll find that import/export directives don’t work. Use a local web-server, such as static-server or use the “live server” capability of your editor, such as VS Code Live Server Extension to test modules. – nedoder Apr 23 '22 at 07:23
This has helped but there is one more error, "Cannot use import statement outside a module". Sorry if it's an obvious answer this is out of my depth and I'm new to all this multi-file stuff – TerryB Apr 23 '22 at 07:27
Not sure how your code looks, but maybe you forgot type="module" to that script tag as well? – nedoder Apr 23 '22 at 07:32
It's alright another comment worked, I guess I was doing something wrong with this solution. Thanks for the help though :) – TerryB Apr 23 '22 at 07:39

score 1 · Accepted Answer · answered Apr 23 '22 at 07:34

You should add both the scripts to html. Then, you should make the array global:

window.wordList = [
    "this",
    "is",
    "an",
    "array"
]

Then in the main.js file, you can access the array like this:

const word = window.wordList[Math.floor(Math.random() * wordList.length)];

But make sure, you add the script with the array before the main.js file in the html

score 0 · Answer 3 · answered Apr 23 '22 at 07:07

0

You need to export your array and import it in any file you want. Full details of the export/import mechanism can be found in the next Stackoverflow question

answered Apr 23 '22 at 07:07

ValentinK

83
1
6

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Apr 23 '22 at 08:27

How to access array from another .js file?

3 Answers3