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
– Thabiso Prosper Ramokopu, Commented Aug 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
– Thabiso Prosper Ramokopu, Commented Aug 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
– vsync, Commented Aug 6, 2019 at 19:09

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

6

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>

answered Aug 6, 2019 at 19:04

connexo

57.2k15 gold badges112 silver badges149 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Thabiso Prosper Ramokopu Over a year ago

I got an 'Uncaught SyntexError: Unexpected token

connexo Over a year ago

That happens if you forget type="module".

Thabiso Prosper Ramokopu Over a year ago

Okay the error is gone but there's no feedback on my console.log(imageList) and my function doesn't execute past it

connexo Over a year ago

What do you mean there's no feedback on my console.log(imageList) and my function doesn't execute past it?

Thabiso Prosper Ramokopu Over a year ago

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

|

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

3

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();

edited Oct 3, 2020 at 21:33

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Aug 6, 2019 at 19:09

elkefreed

9651 gold badge15 silver badges32 bronze badges

2 Comments

Thabiso Prosper Ramokopu Over a year ago

logically that makes sense but I got a' UncaughtReferenceError: myImageList is undefined'

elkefreed Over a year ago

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);

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

3

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

edited Oct 3, 2020 at 21:35

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Aug 6, 2019 at 19:03

louis.sugar

2011 silver badge10 bronze badges

Collectives™ on Stack Overflow

How can I import a variable from another JavaScript file?

3 Answers 3

6 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related