How can I import a variable from another JavaScript file?

Question

I want to import an array (imageArray[]) that is being populated by another JavaScript file (imageUploadDisplay.js) into another JavaScript file function (postInfoAndImages.js). Below is my imageUploadDisplay.js function that I tried to use.

// In my imageUploadDisplay.js var imageList = []; function myImageList() { return imageList; }

As explained by others I use the following jQuery to import imageUploadDisplay.js into the JavaScript postInfoAndImages.js:

// In my postInfoAndImages.js var imageList = []; $.getScript('imageUploadDisplay.js', function () { // Script is now loaded and executed. alert("Script loaded, but not necessarily executed."); imageList = myImageList(); // Picture array console(imageList); });

Yes was attempting to at least copy the values from 1 array to the other — Thabiso Prosper Ramokopu, CommentedAug 6, 2019 at 19:00
I want to access the array created and populated by imageUploadDisplay.js into a function created in postInfoAndImages.js — Thabiso Prosper Ramokopu, CommentedAug 6, 2019 at 19:04
You are not importing anything into postInfoAndImages.js, contrary to what you are thinking. You are simply executing a piece of code which is injecting another script to the document itself, and not to postInfoAndImages.js, thus it should already be globally accessed, depending on what's inside the injected script. — vsync, CommentedAug 6, 2019 at 19:09

connexo · Accepted Answer · 2019-08-06 19:04:38Z

For modern browsers like Firefox, Chrome, Safari and Opera, just use ES6 modules.

In your imageUploadDisplay.js create a named export:

// imageUploadDisplay.js var imageList = []; export function myImageList() { return imageList; }

Then just import the function:

// then in postInfoAndImages.js import { myImageList } from './path/to/imageList.js'; var imageList = myImageList();

In your HTML, you no longer need to include imageUploadDisplay.js (this is done by the import at runtime).

Instead, include the importing script with type="module":

<script type="module" src="./path/to/postInfoAndImages.js"></script>

Okay the error is gone but there's no feedback on my console.log(imageList) and my function doesn't execute past it — Thabiso Prosper Ramokopu, CommentedAug 6, 2019 at 19:36
What do you mean there's no feedback on my console.log(imageList) and my function doesn't execute past it? — connexo, CommentedAug 6, 2019 at 19:55
I've put the initial imageList[] in my imageUploadDisplay.js in a console log and it shows me the number of files in it so now that I've imported it in postInfoAndImages.js the imageList[] doesn't show anything when put it in the console log — Thabiso Prosper Ramokopu, CommentedAug 6, 2019 at 20:07

Peter Mortensen · Accepted Answer · 2020-10-03 21:33:42Z

You don't even need to include the second file in your first to use the function. If the first file is called in your code before the second, you can just refer to the function.

<script type="text/javascript" src="imageUploadDisplay.js"/> <script type="text/javascript" src="postInfoAndImages.js"/>

In postInfoAndImages.js, simply call the function in question:

var imageList[]; imageList = myImageList();

logically that makes sense but I got a' UncaughtReferenceError: myImageList is undefined' — Thabiso Prosper Ramokopu, CommentedAug 6, 2019 at 19:48
It should work if you have it referenced properly. I did a quick test. In my first js I have: var cars = ["Saab", "Acura", "Volvo"]; function myCarList() { return cars; } A console.log(myCarsList()) returns the above array. In my second file I called it again but with a blank array and I get the blank array returned. cars = myCarList(); console.log(cars); — elkefreed, CommentedAug 6, 2019 at 20:12

Peter Mortensen · Accepted Answer · 2020-10-03 21:35:44Z

You need to work with exports and imports.

// File imageUploadDisplay.js let myImageList = () => { return imageList; } export default imageList

And then import it into the other file

// postInfoAndImages.js import imageList from "./imageUploadDisplay" // -> Do something with imageList

Collectives™ on Stack Overflow

How can I import a variable from another JavaScript file?

3 Answers 3

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Related